生活随笔
收集整理的這篇文章主要介紹了
HTML学习笔记之二（回到顶部 与 回到底部）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
回到頂部 回到底部
回到頂部的倆種方式
?一、使用js
?? ???
[javascript]?view plaincopy
$('html,?body').animate({?scrollTop:?0?},?'fast');?? ???????$('html,body').scrollTop(0);???
?? ??
[javascript]?view plaincopy
$(window).scroll(function?()?{?? ???????????? ?????????????$('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(){?? ?? ???????????????? ??????????????$("#back-top").hide();?? ?? ???????????????? ??????????????$(function?()?{?? ????????????????$(window).scroll(function?()?{?? ??????????????????if?($(this).scrollTop()?>?100)?{?? ????????????????????$('#back-top').fadeIn();?? ??????????????????}?else?{?? ????????????????????$('#back-top').fadeOut();?? ??????????????????}?? ????????????????});?? ?? ?????????????????? ????????????????$('#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学习笔记之二（回到顶部 与 回到底部）的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
