熟悉 scrollTop ，轻松做5个方面的事情。-优快云博客

2019独角兽企业重金招聘Python工程师标准>>>

通过获取 scrollTop （滚动条顶部）的偏移值，我们可以做5个事情，也是平时项目中经常用到的几个；

① 加载时，获取偏移值，然后做一些操作；

// ① 此处只是页面加载时 不能实时监控
  $(function(){
	   if ( $(window).scrollTop() > 50 ){
		   alert(50)
		   }
	  })

② 实时监控页面滚动条变化时，实时做出一些操作；

$(function(){ 
     $(window).scroll(function () {  // ② 监控页面滑动变化时 做判断 
			if ($(window).scrollTop() > 0) {
			  $("#div1").show(300);
			}
			
			if ($(window).scrollTop() > 300) {
			  $("#div2").show(300);
			}
			
			
			 if ($(window).scrollTop() > 600) {
			  $("#div3").show(300);
			}   
       })      
});

③ 点击某些固定的按钮，让页面滑到指定的锚点；

 //③ 通过按钮带到锚点位置
$("#go_top").click(function(){
	$("html,body").animate({scrollTop:$("body").offset().top},500)
})

④ 另外：初始菜单在一个位置，滚动条下拉后，菜单固定实例

js如下

$(function(){
	$(window).scroll(function () { 
		var this_obj= $(".nav-warp")
		if ( $(window).scrollTop() > 50 ){
		   this_obj.addClass("nav-scrolling");
		}
		else{
			this_obj.removeClass("nav-scrolling");
		}
	})
})

css如下：

.nav-scrolling{ top:0px; position: fixed;}

⑤ 获取地址栏参数，页面滑动到指定位置。

js如下

/******获取地址栏参数滑动到指定位置--开始******/

        //传递方法：XXXX.html?id=messages

        //获取参数
        function UrlSearch()
        {
            var name,value;
            var str=location.href; //取得整个地址栏
            var num=str.indexOf("?")
            str=str.substr(num+1); //取得所有参数   stringvar.substr(start [, length ]

            var arr=str.split("&");
            for(var i=0;i < arr.length;i++){
                num=arr[i].indexOf("=");
                if(num>0){
                    name=arr[i].substring(0,num);
                    value=arr[i].substr(num+1);
                    this[name]=value;
                }
            }
        }

        //执行方法
        var Request=new UrlSearch();
        var this_id=Request.id;
        console.log(this_id);
        if (this_id=="messages")
        {
            $("html,body").animate({scrollTop:$("#current_messages").offset().top},500)
        }

    /******获取地址栏参数滑动到指定位置--结束******/

html如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<table width="100%">
			<tr>
				<td height="500" style="background：blue;"></td>
			</tr>
			<tr>
				<td height="800" style="background: green;" id="current_messages"></td>
			</tr>
		</table>
	</body>
</html>


<!--
	比如说把这个代码存为demo.html
	那么我要访问demo.html?id=test
	这个时候就取到test的值了
-->

备注：

定位失效问题？可能是这个原因导致的。

第一种情况：

.list-content{ width: 100%; padding-right: 15px; box-sizing: border-box; clear: both; overflow: hidden;} 如果你的容器高度不确定，后面一定要加上overflow: hidden; 让其撑起来，否则，通过指定锚点的定位会找不准，因为实际高度js算不出来。

第二种情况:

在用到第三方插件时，有些样式会将html高度设置为100%；这样会把srollTop滑动无效，解决办法：用媒体查询，在大屏时，不设html的高度值。

转载于:https://my.oschina.net/u/583531/blog/639287