找回密码
当前位置：前端开发者 > 未分类 > 正文

js与jq 前端开发怎么实现回到顶部

2018-07-17 分类：未分类 阅读(678) 评论(0)

前端开发常用词汇|d2前端开发者大会视频下载|web前端开发课件 下载

js与jq实现回到顶部，兼容ie6、7、8、9、10、11以及现代浏览器

js原生代码实现：

运行看看效果：
代码片段 1

<!DOCTYPE html>
<head lang=”en”>
    <meta charset=”UTF-8″>
    <title>前端开发常用词汇:回到顶部</title>
    <style>
        body {
            height: 2000px;
        }
        a {
            position: fixed;
            right: 20px;
            bottom: 20px;
            display: none;
        }
    </style>
</head>
<body>
    <a href=”javascropt:void(0)” id=”huitop”>回到顶部</a>
    <script>
        var huitop = document.getElementById(‘huitop’);
        var ti = null;
        window.onscroll = function () {
            var scroll = document.body.scrollTop || document.documentElement.scrollTop;
            var skhei = window.innerHeight || document.documentElement.clientHeight;
            if (scroll >= skhei / 2) {
                huitop.style.display = ‘block’;
            } else {
                huitop.style.display = ‘none’;
            }
            huitop.onclick = function (e) {
                var e = e || window.event;
                // e.preventDefault();
                // e.stopPropagation();
                ti = setInterval(function () {
                    scroll -= Math.floor(scroll / 5);
                    if (scroll <= 10) {
                        scroll = scroll – 10;
                    }
                    if (scroll <= 0) {
                        clearInterval(ti);
                    }
                    document.body.scrollTop = document.documentElement.scrollTop = scroll;
                    console.log(scroll);
                }, 25);
                return false;
            }
        }
    </script>
</body>
</html>

jq实现代码：

运行查看效果：
代码片段 2

<!DOCTYPE html>
<head lang=”en”>
    <meta charset=”UTF-8″>
    <title>前端开发常用 回到顶部</title>
    <style>
        body {
            height: 2000px;
        }
        a {
            position: fixed;
            right: 20px;
            bottom: 20px;
            display: none;
        }
    </style>
</head>
<body>
    <a href=”javascropt:void(0)” id=”huitop”>回到顶部</a>
    <script src=”http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js”></script>
    <script>
        var huitop = document.getElementById(‘huitop’);
        $(window).on(‘scroll’, function () {
            var scroll = $(window).scrollTop();
            var huitop = $(‘#huitop’);
            if (scroll <= $(window).height() / 2) {
                huitop.css(‘display’, ‘none’);
            } else {
                huitop.css(‘display’, ‘block’);
            }
        });
        $(‘#huitop’).click(function () {
            $(‘body,html’).animate({ ‘scrollTop’: 0 }, 300);
        });
    </script>
</body>
</html>
简历上前端开发技能怎么写|前端开发人员必须读的书|web前端开发实例下载
赞(1)
前端开发者 » js与jq 前端开发怎么实现回到顶部
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论