JavaScript Gotop簡(jiǎn)介

對(duì)于網(wǎng)頁內(nèi)容較多的情況，用戶需要不斷地向下滾動(dòng)頁面，這種方式在流暢度、體驗(yàn)度上都有一定的問題。為了使頁面的瀏覽變得更加便捷，業(yè)界不約而同地設(shè)計(jì)出了“返回頂部”功能，也就是JavaScript Gotop。

在實(shí)現(xiàn)這個(gè)功能時(shí)，往往需要一些特殊的JS代碼來實(shí)現(xiàn)。下面來看一些實(shí)現(xiàn)方式的舉例：

// 方案一：?jiǎn)渭兪褂胹crollTop
function scrollWindow(){
if (document.documentElement.scrollTop >0) {
window.scrollBy(0, -30);
setTimeout(scrollWindow, 10);
}
}
/*
這個(gè)方法并不是很好用，直接讓window滾動(dòng)，容易出現(xiàn)滾動(dòng)的一閃一閃的效果，而且當(dāng)有定位position固定的東西時(shí)，頁面頂部可能會(huì)有空白。
*/
// 方案二：JS和CSS雙管齊下
function goTop(){
var obj = document.getElementById("goTopBtn");
function getScrollTop(){
return document.documentElement.scrollTop + document.body.scrollTop;
}
function setScrollTop(value){
if(document.documentElement.scrollTop){
document.documentElement.scrollTop = value;
}
else{
document.body.scrollTop = value;
}
}
window.onscroll = function(){
getScrollTop() >0 ? obj.style.display="block":obj.style.display="none";
}
obj.onclick = function(){
var goTopTime = setInterval(scrollMove, 10);
function scrollMove(){
setScrollTop(getScrollTop()/1.1);
if(getScrollTop()<1) clearInterval(goTopTime);
}
}
}
/*
使用JS和CSS雙管齊下能夠避免我們?cè)谑褂胹crollTop時(shí)遇到的問題，且返回頂部按鈕的樣式可以直接使用CSS控制。
*/
// 方案三：jquery
$(document).ready(function(){
$(window).scroll(function() {
if ($(window).scrollTop() >100) {
$('#goTopBtn').fadeIn(600);
}
else{
$('#goTopBtn').fadeOut(300);
}
});
$('#goTopBtn').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);});
});
/*
jquery越來越流行，使用jquery編寫代碼能夠減少我們的代碼量。我們只需要調(diào)用相關(guān)的方法就可以完成一些我們想要的功能。
*/

總結(jié)

JavaScript Gotop是一種用于網(wǎng)頁中實(shí)現(xiàn)“返回頂部”功能的JS代碼。我們可以使用scrollTop單獨(dú)進(jìn)行頁面滾動(dòng)，也可以在JS和CSS配合下實(shí)現(xiàn)。jquery對(duì)于實(shí)現(xiàn)這個(gè)功能也有很大的幫助。總的來說，根據(jù)自己的需求選擇不同的實(shí)現(xiàn)方式即可。