<span id="mktg5"></span>

<i id="mktg5"><meter id="mktg5"></meter></i>

        <label id="mktg5"><meter id="mktg5"></meter></label>
        最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
        問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
        當前位置: 首頁 - 科技 - 知識百科 - 正文

        css實現快速回到頂部效果

        來源:懂視網 責編:小采 時間:2020-11-02 22:15:37
        文檔

        css實現快速回到頂部效果

        css實現快速回到頂部效果:背景:現在的網站基本上都是長頁面,多的有四五屏,少的話也有兩三屏,頁面太長有的時候為了提升用戶體驗,會在頁面右邊出現一個回到頂部的按鈕,這樣能快速回到頂部,以免在滑動頁面出現視覺屏幕,回到頂部一般有四種方式。1、通過錨鏈接回到頂部,需要將bo
        推薦度:
        導讀css實現快速回到頂部效果:背景:現在的網站基本上都是長頁面,多的有四五屏,少的話也有兩三屏,頁面太長有的時候為了提升用戶體驗,會在頁面右邊出現一個回到頂部的按鈕,這樣能快速回到頂部,以免在滑動頁面出現視覺屏幕,回到頂部一般有四種方式。1、通過錨鏈接回到頂部,需要將bo

        背景:

        現在的網站基本上都是長頁面,多的有四五屏,少的話也有兩三屏,頁面太長有的時候為了提升用戶體驗,會在頁面右邊出現一個回到頂部的按鈕,這樣能快速回到頂部,以免在滑動頁面出現視覺屏幕,回到頂部一般有四種方式。

        1、通過錨鏈接回到頂部,需要將body加入一個名為top的標記

        <a href="#top" target="_self">回到頂部</a>

        2、通過JavaScript的scroll回到頂部,控制水平和垂直方向

        <a href="javascript:scroll(0,0)">JavaScript回到頂部<s/a>

        3、通過JavaScript控制,緩慢向上滑動,不過不夠平滑

        <a onclick="goScrollTop()">JavaScript緩慢向上滑動</a>
        function goScrollTop() {
         //把內容滾動指定的像素數(第一個參數是向右滾動的像素數,第二個參數是向下滾動的像素數)
         //向上是負數,向下是正數
         window.scrollBy(0, -100);
         //延時遞歸調用,模擬滾動向上效果
         scrolldelay = setTimeout('goScrollTop()', 100);
         //獲取scrollTop值,聲明了DTD的標準網頁取document.documentElement.scrollTop,否則取document.body.scrollTop;因為二者只有一個會生效,另一個就恒為0,所以取和值可以得到網頁的真正的scrollTop值
         var sTop = document.documentElement.scrollTop + document.body.scrollTop;
         //判斷當頁面到達頂部,取消延時代碼(否則頁面滾動到頂部會無法再向下正常瀏覽頁面)
         if (sTop == 0) clearTimeout(scrolldelay);
        }

        4、當滾動條滾動到一定位置的時候顯示,滾動條向上回滾的時候隱藏向上的回到頂部按鈕,這種方式是最常用的方式

        <div class="goTop">
         <span>Go</span>
        </div>

        jQuery代碼:

        function goTop(min_height) {
         $(".goTop").click(
         function() {
         $('html,body').animate({
         scrollTop: 0
         }, 700);
         });
         //獲取頁面的最小高度,無傳入值則默認為600像素
         min_height=min_height?min_height:400;
         //為窗口的scroll事件綁定處理函數
         $(window).scroll(function() {
         //獲取窗口的滾動條的垂直位置
         var s = $(window).scrollTop();
         //當窗口的滾動條的垂直位置大于頁面的最小高度時,讓返回頂部元素漸現,否則漸隱
         if (s > min_height) {
         $(".goTop").fadeIn(100);
         } else {
         $(".goTop").fadeOut(200);
         }
         });
        }
         
         
        $(function() {
         goTop();
        });

        css代碼:

        .goTop {
         height: 40px;
         width: 40px;
         background: red;
         border-radius: 50px;
         position: fixed;
         top: 90%;
         right: 3%;
         display: none;
        }
         
        .goTop span {
         color: #fff;
         position: absolute;
         top: 12px;
         left: 8px;
        }

        推薦教程:css快速入門

        聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

        文檔

        css實現快速回到頂部效果

        css實現快速回到頂部效果:背景:現在的網站基本上都是長頁面,多的有四五屏,少的話也有兩三屏,頁面太長有的時候為了提升用戶體驗,會在頁面右邊出現一個回到頂部的按鈕,這樣能快速回到頂部,以免在滑動頁面出現視覺屏幕,回到頂部一般有四種方式。1、通過錨鏈接回到頂部,需要將bo
        推薦度:
        標簽: 返回 實現 效果
        • 熱門焦點

        最新推薦

        猜你喜歡

        熱門推薦

        專題
        Top
        主站蜘蛛池模板: 成人免费ā片在线观看| 亚洲欧美在线x视频| 日韩视频在线观看免费| 亚洲中文字幕在线乱码| 成在人线av无码免费高潮水 | 亚洲中文字幕无码亚洲成A人片| 中文字幕在线免费| 亚洲欧洲日产国码www| 国产精品久久免费| 亚洲一级特黄特黄的大片| 大陆一级毛片免费视频观看| 亚洲精品国产suv一区88| 又粗又黄又猛又爽大片免费| 无码日韩人妻AV一区免费l| 亚洲一级黄色视频| 国产99视频精品免费专区| 亚洲国产成人精品青青草原| 在线a人片天堂免费观看高清| 国产亚洲午夜精品| 中文字幕亚洲无线码| 免费人成视频在线观看网站| 亚洲无mate20pro麻豆| 国产精品免费视频一区| 久久高潮一级毛片免费| 亚洲国产美女福利直播秀一区二区| 久久综合AV免费观看| 一级做a爰全过程免费视频毛片| 亚洲精品一品区二品区三品区| 亚洲免费精彩视频在线观看| 中文字幕亚洲男人的天堂网络 | 国产精品亚洲四区在线观看| 哒哒哒免费视频观看在线www | 老色鬼久久亚洲AV综合| 免费无码黄网站在线观看| a级成人毛片免费视频高清| 亚洲五月丁香综合视频| 国产成人精品日本亚洲专区61| 亚洲精品免费在线视频| 日韩免费高清一级毛片| 亚洲精品电影天堂网| 亚洲av中文无码|