简单de静态返回顶部

最新推荐文章于 2017-02-22 21:08:42 发布

iteye_7121

最新推荐文章于 2017-02-22 21:08:42 发布

阅读量113

点赞数

分类专栏： javascript html 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/iteye_7121/article/details/82648896

版权

javascript 同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

html

4 篇文章 0 订阅

订阅专栏

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

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

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

操作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>

iteye_7121

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单de静态返回顶部

一.最简单的静态返回顶部1.用命名锚点击返回到顶部预设的id为top的元素 &lt;a href="#top“&gt;返回顶部&lt;/a&gt; 2. 操作scrooll函数用来控制滚动条的位置（第一个参数是水平位置，第二个参数是垂直位置）&lt;a href="javascript:scroll(0,0)"&gt;返回顶部&lt;/a&gt; ...
复制链接

扫一扫

专栏目录