當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

回到顶部的几种实现方法

發(fā)布時間：2024/8/1 编程问答 29 豆豆

生活随笔收集整理的這篇文章主要介紹了回到顶部的几种实现方法小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

【1】使用默認鏈接錨點

添加一個a鏈接，設(shè)置a鏈接的href屬性值為"#top"即可實現(xiàn)

【2】href指向特定的id

給頁面頂部元素設(shè)置一個id值，將返回頂部a鏈接的href屬性指向改id屬性的元素

【3】使用自定義鏈接錨點

在頁面頂部定義一個錨點，然后將返回頂部a鏈接的href屬性指向該錨點

【4】使用簡單的JavaScript腳本

設(shè)置scrollTo(x,y)中的x和y的坐標值來滾動到頁面的具體位置

?【5】火箭上升式返回頂部（jQuery實現(xiàn)）

上面幾種方式實現(xiàn)起來比較簡單，但是效果生硬，直接從底部切換到頂部，沒有一個過渡的動畫。此方法能使頁面動態(tài)滾動，同時將按鈕換成一個箭頭標志，判斷頁面滾動的距離，當(dāng)頁面滾動到一定的距離后再顯示返回頂部箭頭標志。這樣的效果更佳生動。

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script><style>.header {color: rgb(243, 152, 6);width: 100%;height: 200px;margin: 0 auto;text-align: center;font-size: 20px;}.footer {position: fixed;right: 50px;bottom: 50px;width: 54px;height: 54px;}</style> </head> <body><div class="header">我在頂部</div> <img class="footer" id="gotoTop" src="https://i02piccdn.sogoucdn.com/4f3b2858eec9e2cf" alt=""><script>function gotoTop(minHeight){// 定義點擊返回頂部圖標后向上滾動的動畫$("#gotoTop").click(function(){$('html,body').animate({scrollTop:'0px'},'slow');})// 獲取頁面的最小高度，無傳入值則默認為600像素minHeight? minHeight = minHeight:minHeight = 600;// 為窗口的scroll事件綁定處理函數(shù)$(window).scroll(function(){// 獲取窗口的滾動條的垂直滾動距離var s = $(window).scrollTop();// 當(dāng)窗口的滾動條的垂直距離大于頁面的最小高度時，讓返回頂部圖標漸現(xiàn)，否則漸隱if( s > minHeight){$("#gotoTop").fadeIn(500);}else{$("#gotoTop").fadeOut(500);};});};gotoTop();</script> </body>

文章每周持續(xù)更新，可以微信搜索「?前端大集錦?」第一時間閱讀，回復(fù)【視頻】【書籍】領(lǐng)取200G視頻資料和30本PDF書籍資料

總結(jié)

以上是生活随笔為你收集整理的回到顶部的几种实现方法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇：阿里云CentOS7服务器搭建邮件服务器
下一篇： Ukey双因素身份认证步骤安当加密