Back Top （回到顶部）JS实现

ZHAO_ 发布于2019-08-20 17:41 / 3464人阅读

button

style

原生js

window.onload=function(){
   var obtn= document.getElementById("btn");
    //文档高度
    var clientHeight=document.documentElement.clientHeight;
    var time=null;
    var isTop=true,
        cancelScroll = false;

    window.onscroll = function(){

        var osTop=document.documentElement.scrollTop||document.body.scrollTop;
        if(osTop>=clientHeight){
            obtn.style.display="block";
        }else{
            obtn.style.display="none";
        }
        if(!isTop){
            clearInterval(time);
        }
        isTop=false;
    }

    obtn.onclick=function(){
        //点击事件
        if(cancelScroll == false) {
            time=setInterval(function(){
                var osTop=document.documentElement.scrollTop||document.body.scrollTop;
                var ispeed=Math.floor(-osTop/10);
                document.documentElement.scrollTop=document.body.scrollTop=osTop+ispeed;
                isTop=true;
                if(osTop==0){
                    clearInterval(time);
                }
            },30);
        }else {
            clearInterval(time);
            cancelScroll = true;
        }
    }
}

常见控件效果实现

控件效果实现

云服务器 GPU云服务器 js 浮动回到顶部回到顶部网页回到顶部回到顶部按钮

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83778.html

完美实现一个“回到顶部”

摘要：在浏览器中，页面默认滚动是在标签上，移动端大多数在标签上，在我们想要实现平滑回到顶部，只需在这两个标签上都加上准确的说，写在容器元素上，可以让容器非鼠标手势触发的滚动变得平滑，而不局限于，标签。前言在实际应用中，经常用到滚动到页面顶部或某个位置，一般简单用锚点处理或用js将document.body.scrollTop设置为0，结果是页面一闪而过滚到指定位置，不是特别友好。我们想要...

layman 2019-08-29 17:08 评论0 收藏0
完美实现一个“回到顶部”

摘要：在浏览器中，页面默认滚动是在标签上，移动端大多数在标签上，在我们想要实现平滑回到顶部，只需在这两个标签上都加上准确的说，写在容器元素上，可以让容器非鼠标手势触发的滚动变得平滑，而不局限于，标签。前言在实际应用中，经常用到滚动到页面顶部或某个位置，一般简单用锚点处理或用js将document.body.scrollTop设置为0，结果是页面一闪而过滚到指定位置，不是特别友好。我们想要...

littlelightss 2019-08-23 12:36 评论0 收藏0
五分钟实现一个chrome插件(含源码)

摘要：找了一下网上应用商店，其实已经有很多款类似插件，但往往太过陈旧或者性能较差，不能够满足个人需求，估自己捣鼓了一个插件。代码已经在github更新了 https://github.com/abc-club/c... 请移步github。另外喜欢的话请star。求star求star求star 本文已同步到 https://github.com/abc-club/f... 背景很多网站都...

mengbo 2019-08-26 10:59 评论0 收藏0
Django搭建个人博客：回到顶部浮动按钮、矢量图标、页脚沉底和粘性侧边栏

摘要：本章集中介绍四个重要的小功能回到顶部浮动按钮矢量图标页脚沉底和粘性侧边栏。因为我们想在全站都拥有这个按钮，所以将刚写好的模块引用到中在后面引入注意模块用到了，因此要在后面引入。本章集中介绍四个重要的小功能：回到顶部浮动按钮、矢量图标、页脚沉底和粘性侧边栏。这几个功能与Django基本没啥关系，更多的是前端知识，但是对博客网站都很重要，问的读者也比较多，因此也集中讲一下好了。回到顶...

lovXin 2019-07-31 10:17 评论0 收藏0
浮动【电梯】或【回到底部】的小插件ielevator.js

摘要：是一个小插件，使用简单，兼容，支持和种配置方式，比锚点更灵活。 iElevator.js是一个jquery小插件，使用简单，兼容IE6，支持UMD和3种配置方式，比锚点更灵活。 Default Options _defaults = { floors: null, btns: null, backtop: null, ...

Cobub 2019-08-19 17:16 评论0 收藏0