js实现回到顶部效果

　

回到顶部

功能：

1. 滚动到第二屏才出现“返回顶部”按钮；
2. 点击“返回顶部”按钮会返回顶部，而且速度越来越慢；
3. 在返回顶部的途中如果用鼠标滚一下滚轮会停止返回顶部的滚动。

<script>
        window.onload = function() {
            获取回到顶部的按钮
            var btn = document.getelementbyid('btn');
            var timer = null;

            // 标识是否清除定时器，为了实现在回到顶部的过程中通过滚动一下鼠标实现清除定时器从而达到滚动的目的
            var isTop = true;

            // 获取页面可视区高度，从而判断返回顶部按钮是否出现
            var cHeight = document.documentElement.clientheight;

            window.onscroll = function() {
                // 让返回顶部按钮在第二屏才开始出现
                var osTop = document.documentElement.scrollTop || document.body.scrollTop;
                if (osTop >= cHeight) {
                    btn.style.display = 'block';
                } else {
                    btn.style.display = 'none';
                }

                if (!isTop) {
                    clearInterval(timer);
                }
                isTop = false;
            }

            btn.onclick = function() {
                // 设置定时器
                timer = setInterval(function() {
                    // 获取滚动条距离顶部的高度
                    var osTop = document.documentElement.scrollTop || document.body.scrollTop;
                    // 越滚越慢，设置成负数是为了防止减不到0
                    var ispeed = Math.floor(-osTop / 6);
                    document.documentElement.scrollTop = document.body.scrollTop = osTop + ispeed;

                    isTop = true; // 这里记得设置，不然滚一次就停止了

                    if (osTop == 0) {
                        clearInterval(timer);
                    }
                }, 30);
            };
        }
    </script>

相关阅读

JSP的page对象

一 简介page对象就是指向当前JSP页面本身，有点像类中的this指针，它是java.lang.Object类的实例。二 常用方法三 实例<%@ page langu

require.js的用法-阮一峰

一、为什么要用require.js？ 最早的时候，所有Javascript代码都写在一个文件里面，只要加载这一个文件就够了。后来，代码越来越多，一个文

tabel thead 滑动固定顶部

试了几种方法，还是 translateY 比较靠谱 放弃 ie // 固定头部 var thead_top = $('thead').offset().top; $(window).scroll(fun

JS中height、clientHeight、scrollHeight、offsetHeig

我们来实现test中的onclick事件   function justAtest()    {        var test= document.getElementById("test")

js中substring和substr函数用法

函数： stringObject.substring(start,stop) 参数： start 必需。一个非负的整数，规定要提取的子串的第一个字符在 stringObject 中