Back Top （回到頂部）JS實現

ZHAO_ 發布于2019-08-20 17:41 / 3482人閱讀

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 浮動回到頂部回到頂部網頁回到頂部回到頂部按鈕

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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