源生JS实现回到顶部--缓冲效果

红太狼 2022-06-15 05:24 217阅读 0赞

HTML代码：

<a href="javascript:;" id="btn" title="回到顶部">Top</a>

注意给body设置一个高度便于测试；  
CSS代码：

a{ text-decoration: none; }
    #btn { width:40px; height:40px; position:fixed; background: #aaa; color: #fff; right:25px; bottom:10px; display:none;text-align: center; line-height: 40px; }
    #btn:hover { background: #999; }

JS代码：

window.onload = function(){ 
    
        var btn = document.getElementById("btn");
        var clientHeight = document.documentElement.clientHeight;  //获取可视区域的高度
        var timer = null;   //定义一个定时器
        var isTop = true;   //定义一个布尔值，用于判断是否到达顶部
    
        window.onscroll = function(){ 
            //获取滚动条的滚动高度
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    
            //如果滚动高度大于可视区域高度，则显示回到顶部按钮否则隐藏
            btn.style.display = scrollTop >= clientHeight ?  "block" : "none";
    
            //判断当点击回到顶部按钮后滚动条在回滚过程中，若手动滚动滚动条，则清除定时器
            if(!isTop){
                 clearInterval(timer);
            }
            isTop = false;
    
        }
        //回到顶部按钮点击事件
        btn.onclick = function(){ 
    
            timer = setInterval( function(){ 
    
                //获取滚动条的滚动高度
                var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    
                //用于设置速度差，产生缓动的效果
                var speed = Math.floor(-scrollTop / 6);
                document.documentElement.scrollTop = document.body.scrollTop = scrollTop + speed;
                isTop =true;  //用于阻止滚动事件清除定时器
    
                if(scrollTop == 0){
                    clearInterval(timer);
                }
    
            },50 );
        }
    
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，217人围观）

还没有评论，来说两句吧...

相关阅读

相关 js浏览器回到顶部方法_基于JS实现回到页面顶部的五种写法(从实现到增强)

写法【1】锚点使用锚点链接是一种简单的返回顶部的功能实现。该实现主要在页面顶部放置一个指定名称的锚点链接，然后在页面下方放置一个返回到该锚点的链接，用户点击该链接即可返

秒速五厘米/ 2023年01月01日 05:53/ 0 赞/ 251 阅读

相关 jquery实现回到顶部效果

css: <style> div { width: 100%; height:

朱雀/ 2022年09月14日 09:09/ 0 赞/ 196 阅读

相关源生JS实现回到顶部--缓冲效果

HTML代码： <a href="javascript:;" id="btn" title="回到顶部">Top</a> 注意给body设置一个高度便于测试；

红太狼/ 2022年06月15日 05:24/ 0 赞/ 218 阅读

相关回到顶部JavaScript实现

html代码 <div id="box"></div> css代码 { margin: 0;

青旅半醒/ 2022年05月27日 12:29/ 0 赞/ 284 阅读

相关 JS原生之回到顶部。

> 欢迎评论，指出不足，表达建议~ <!-- a 标签的a:hover兼容所有浏览器。默认跳转页面，没有值得话，刷新本页面。写target：锚点

向右看齐/ 2022年05月14日 03:25/ 0 赞/ 212 阅读

相关详解原生JS回到顶部

第一次知道可以用超链接（锚点）实现回到顶部的时候我是很震惊的，想着原来可以这么简单啊！但是作为一个正在学习JS的小白，不能就这么轻易止步，所以查资料自己整了一个[JS返回顶部]

ゝ一世哀愁。/ 2021年12月14日 11:29/ 0 赞/ 254 阅读

相关回到顶部效果

锚链接优点：简单快速、没有兼容性问题缺点：视觉上不够直观，用户体验不够好用JavaScript制作回到顶部效果当滚动条滚动一定

Bertha 。/ 2021年10月19日 11:36/ 0 赞/ 436 阅读

相关 JS基础之实现回到顶部

首先需要引入tween.js动画库 ![70][] 点击该按钮,页面会回到顶部,并伴随一定动画 <!DOCTYPE html> <html lang="z

Dear 丶/ 2021年09月15日 19:42/ 0 赞/ 414 阅读

相关源生js惯性滚动与回弹效果

在写移动端的`APP`或者页面时，经常会遇到惯性滚动与回弹效果。用插件`iscroll`可以轻松解决这个问题，大多数的移动框架也能轻松解决这个问题，它们内部都封装了这个效果。

╰半夏微凉°/ 2021年07月04日 19:49/ 0 赞/ 394 阅读

相关原生JS如何实现回到顶部效果？

原生JS如何实现回到顶部效果？这个a标签就是用来实现回到顶部的链接,其中 href=”javascript:;”是用来阻止a标签的默认行为，因为我们是要触发点击事件让滚...

朱雀/ 2020年07月01日 21:24/ 0 赞/ 757 阅读