背景:
創新互聯建站從2013年成立,是專業互聯網技術服務公司,擁有項目網站設計、做網站網站策劃,項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命,1280元臨淄做網站,已為上家服務,為臨淄各地企業和個人服務,聯系電話:13518219792現在的網站基本上都是長頁面,多的有四五屏,少的話也有兩三屏,頁面太長有的時候為了提升用戶體驗,會在頁面右邊出現一個回到頂部的按鈕,這樣能快速回到頂部,以免在滑動頁面出現視覺屏幕,回到頂部一般有四種方式。
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點擊快速回到頂部效果的代碼-創新互聯
文章地址:http://m.newbst.com/article20/hsgjo.html
成都網站建設公司_創新互聯,為您提供ChatGPT、云服務器、網站營銷、營銷型網站建設、品牌網站建設、動態網站
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯