> > 使用jQuery自動判斷顯示回到頁首(Back to Top)

使用jQuery自動判斷顯示回到頁首(Back to Top)

在只有出現卷軸時才需要出現回到頁首時才出現「回到頁首」(Back to Top)
可以避免常駐式按鈕干擾
能夠增加一定的使用者體驗
1.在 <head> 跟 </head> 裡引入jQuery

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" ></script>
2.在 <head> 跟 </head> 裡貼入以下自動判斷出現回到頁首(Back to Top)的程式碼
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery(document).scroll(function () {
if (jQuery(document).scrollTop() > 100) {
jQuery('.back_top').fadeIn(100);
} else {
jQuery('.back_top').fadeOut(100);
}
});

jQuery('.back_top').click(function (event) {
event.preventDefault();
jQuery('html, body').animate({ scrollTop: 0 }, 500);
});
});
</script>
3.在 <head> 跟 </head> 或是 CSS 樣式檔案中貼入以下 CSS 程式碼
然後修改成自己想要的樣式
.back_top{position:fixed;bottom:150px;right:200px;}
4.在 <body> 跟 </body> 中貼入以下HTML語法
<a class="back_top" href="#" title="Back to Top">回到頁首</a>
引入的jQery可以使用Google Hosted Libraries所提供的函式庫
這樣不僅減少自己空間的流量使用
也可更完善與方便地維護

於版本名稱部分填入欲使用的
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/版本名稱/jquery.min.js" ></script>

如3.2.1就會是
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" ></script>
自動判斷出現回到頁首(Back to Top)的程式碼使用說明:
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery(document).scroll(function () {
//卷軸超過100像素才出現
if (jQuery(document).scrollTop() > 100) {
//判斷要顯示跟隱藏的回到頁首元素跟出現速度,可使用CSS id跟class
jQuery('.back_top').fadeIn(100);
} else {
jQuery('.back_top').fadeOut(100);
}
});

jQuery('.back_top').click(function (event) {
event.preventDefault();
//回到頁首(Back to Top)移動速度
jQuery('html, body').animate({ scrollTop: 0 }, 500);
});
});
</script>