`
刘朝雪
  • 浏览: 80105 次
  • 来自: 河北
社区版块
存档分类
最新评论

简单de静态返回顶部

 
阅读更多

一.最简单的静态返回顶部

1.

用命名锚点击返回到顶部预设的id为top的元素

 

<a href="#top“>返回顶部</a>

 

2.

 

操作scrooll函数用来控制滚动条的位置(第一个参数是水平位置,第二个参数是垂直位置)

<a href="javascript:scroll(0,0)">返回顶部</a>

  

 

二.简单的静态返回顶部,用js模拟滚动效果

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #btn {
           position: fixed;
            bottom: 0;
        }

    </style>
</head>
<body style="height: 10000px">
<a href="javascript:;" id="btn">回到顶部</a>
<script>
    window.onload = function(){
        var btn = document.getElementById('btn');
        // 获取视界高度;
        var winH = document.documentElement.clientHeight;
        // 定义计时器;
        var timer = null;
        // 定义是否抵达顶部布尔值判断;
        var isTop = true;
        // 设置滚动事件;
        window.onscroll = function(){
            var toTop = document.body.scrollTop || document.documentElement.scrollTop;
            // 判断是否到了第二屏,若是,显示按钮;
            if (toTop >= winH) {
                btn.style.display = 'block';
            }else{
                btn.style.display = 'none';
            };
            // 判断是否抵达顶部,若否,停止计时器;
            if (!isTop) {
                clearInterval(timer);
            };
            // 重置布尔值判断;
            isTop = false;
        }
        // 设置按钮单击事件;
        btn.onclick = function(){
            // 设置计时器,50毫秒间隔;
            timer = setInterval(function(){
                var toTop = document.body.scrollTop || document.documentElement.scrollTop;
                // 设置速度,用等式而不用具体数值是为了产生缓动效果;
                var speed = Math.ceil(toTop/5);
                // 作差,产生缓动效果;
                document.documentElement.scrollTop = document.body.scrollTop = toTop - speed;
                // 重置布尔值判断;
                isTop = true;
                // 判断是否抵达顶部,若是,停止计时器;
                if (toTop == 0) {
                    clearInterval(timer);
                };
            },50);
        }
    }
</script>
</body>
</html>

 

 

 

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics