回到頂部 回到底部

回到頂部的倆種方式

?一、使用js

?? ???

[javascript]?view plaincopy

$('html,?body').animate({?scrollTop:?0?},?'fast');//帶動畫??

???????$('html,body').scrollTop(0);?//不帶動畫??

?? ?? [javascript]?view plaincopy

$(window).scroll(function?()?{??

??????????//You've?scrolled?this?much:??

?????????????$('p').text("You've?scrolled?"?+?$(window).scrollTop()?+?"?pixels");??

??????});??

二、使用 a 標簽的name屬性

?? ??? ???

[html]?view plaincopy

<a?name="top">top</a>??

???????????<a?href="#top">Click?here?go?back?to?the?top.</a>??

三、獲取高度

?1. 整個文檔高度

??????

[javascript]?view plaincopy

var?body?=?document.body,??

???????????html?=?document.documentElement;??

??

???????var?height?=?Math.max(?body.scrollHeight,?body.offsetHeight,??

??????????????????????html.clientHeight,?html.scrollHeight,?html.offsetHeight?);??

??

??????//?或者??

???????var?height?=?$(document).height();??

?2. 當前屏幕高度

???????

[javascript]?view plaincopy

var?wheight?=?$(window).height();??

HTML代碼

[html]?view plaincopy

<!--?側邊欄?按鈕-->??

????????<div?id="back-top">??

??????????<button?class="styled-button">TOP</button>??

????????</div>??

????????<div?id="back-end">??

??????????<button?class="styled-button">TOP</button>??

????????</div>??

????????<!--底部?內容-->??

????????<div?id="footer"></div>??

js代碼

[javascript]?view plaincopy

jQuery(document).ready(function($){??

????/**?

?????*?回到頂部?

?????*/??

????$('#back-top').click(function(){??

????????$('html,body').stop();??

????????$('html,body').animate({??

????????????scrollTop:'0px'??

????????},1000);??

????});??

??????

????/**?

?????*?回到底部?

?????*/??

????$('#back-end').click(function(){??

????????$('html,body').stop();??

????????$('html,body').animate({??

????????????scrollTop:$('#footer').offset().top??

????????},1000);??

????});??

});??

[javascript]?view plaincopy

//回到頂部的?顯示?隱藏代碼??

???????????$(document).ready(function(){??

??

??????????????//?hide?#back-top?first??

??????????????$("#back-top").hide();??

??

??????????????//?fade?in?#back-top??

??????????????$(function?()?{??

????????????????$(window).scroll(function?()?{??

??????????????????if?($(this).scrollTop()?>?100)?{??

????????????????????$('#back-top').fadeIn();??

??????????????????}?else?{??

????????????????????$('#back-top').fadeOut();??

??????????????????}??

????????????????});??

??

????????????????//?scroll?body?to?0px?on?click??

????????????????$('#back-top').click(function?()?{??

??????????????????$('body,html').animate({??

????????????????????scrollTop:?0??

??????????????????},?'fast');??

??????????????????return?false;??

????????????????});??

??????????????});??

??

????????????});??

css代碼

[html]?view plaincopy

#back-top{position:?fixed;?bottom:20px;?right:?2%;?z-index:?100;?} ?

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的HTML学习笔记之二（回到顶部 与 回到底部）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。