【js】js和jq实现回顶动画效果和滚动条监听事件详解

js/jq实现回顶动画效果以及滚动条监听事件详解

在平常的网站中为了优化用户体验，可以说回顶效果是应用最多的js特效了。

废话不多说，直接开门见山。

一.回顶动画效果

1.html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body style="height: 2000px;">//设置页面高度
    <div id="to_top" style="width: 40px; height: 40px;
     line-height: 40px; text-align: center;
    color: black; background: firebrick;
    position: fixed; bottom: 20px; right:  20px;">^</div>//设置回顶按钮
   
</body>
</html>

2. js代码

 <script>
        var to_top=document.getElementById("to_top");
        to_top.onclick = function() {
                // 设置定时器
                timer = setInterval(function() {
                    // 获取滚动条距离顶部的高度
                    var osTop = document.documentElement.scrollTop || document.body.scrollTop;
                    // 越滚越慢，设置成负数是为了防止减不到0
                    var ispeed =-osTop / 6;
                    document.documentElement.scrollTop = document.body.scrollTop = osTop + ispeed;
                    if (osTop == 0) {
                        clearInterval(timer);
                    }
                }, 30);
            };
        
    </script>

3. jq代码

 	<script>
        $("#to_top").click(function(){
            $("document,html").animate({scrollTop:0},1000)
        })
    </script>

jq相比于js代码就简单不少

二.滚动条监听事件

1.js实现方法

window.onscroll = function() {}

//js本身自有的滚动条监听方法

用法举例：

window.onscroll = function() {
	//top_num当前位置距离页面顶部距离
	//每次滚动都会重新定义一次当前滚动条距离页面顶部的距离
	  var top_num= document.documentElement.scrollTop||document.body.scrollTop;
	//你现在可以监听滚动条的位置，可以做喝多事情，靠你自己发挥了
}