<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
        主站蜘蛛池模板: 亚洲精品视频免费在线观看| 女人被男人躁的女爽免费视频| 亚洲&#228;v永久无码精品天堂久久| 国产又黄又爽又刺激的免费网址 | 妻子5免费完整高清电视| 亚洲精品国产字幕久久不卡| 中文字幕免费观看全部电影| 国产在线jyzzjyzz免费麻豆| www.亚洲一区| 亚洲伊人久久大香线焦| 国产免费不卡视频| 亚洲色欲色欲www在线丝| 亚洲成人激情小说| 日本高清免费aaaaa大片视频| 国产精品亚洲精品日韩动图| 亚洲黄色免费网站| 中文字幕亚洲专区| 老司机69精品成免费视频| 亚洲精彩视频在线观看| 免费人成视频在线| 亚洲网站在线观看| 久久国内免费视频| 亚洲尹人九九大色香蕉网站| 亚欧人成精品免费观看| 亚洲精品无码久久久久APP| 亚洲精品乱码久久久久久蜜桃 | 亚洲情综合五月天| 一级毛片大全免费播放下载| 亚洲成A人片在线观看WWW| 亚洲成人免费在线观看| 亚洲AV永久纯肉无码精品动漫| 成年人网站免费视频| 深夜a级毛片免费视频| 久久久久久亚洲av成人无码国产| 99在线视频免费观看视频| 亚洲一区二区成人| 精品免费视在线观看| 国产精品亚洲精品| 国产gv天堂亚洲国产gv刚刚碰 | 国产免费直播在线观看视频| 亚洲日本久久久午夜精品|