在網(wǎng)頁(yè)制作中，我們通常使用js和css來(lái)控制滾動(dòng)條的出現(xiàn)和隱藏。但是有時(shí)候我們希望網(wǎng)頁(yè)在不出現(xiàn)滾動(dòng)條的情況下進(jìn)行切換，這時(shí)候就需要一些特殊的技巧了。

//CSS代碼
body{
overflow: hidden; /*隱藏滾動(dòng)條*/
}
html{
width: 100%;
height: 100%;
}
//JS代碼
$(document).on('click', '.btn', function(){
var url = $(this).attr('href');
$('html').css('overflow','scroll'); /*開(kāi)啟滾動(dòng)條*/
$('html, body').animate({scrollTop:0}, '1000'); /*滾動(dòng)到頂部*/
setTimeout(function(){
window.location.href = url; /*跳轉(zhuǎn)到目標(biāo)鏈接*/
}, 1000);
return false;
})

以上代碼可以完成在沒(méi)有滾動(dòng)條的情況下進(jìn)行頁(yè)面切換，具體實(shí)現(xiàn)方式是在頁(yè)面跳轉(zhuǎn)前，先將html的overflow屬性設(shè)置為scroll，在定時(shí)器中跳轉(zhuǎn)到目標(biāo)頁(yè)面前，先滾動(dòng)到頁(yè)面頂部，然后再進(jìn)行頁(yè)面跳轉(zhuǎn)。這時(shí)候用戶便看不到任何滾動(dòng)條，就像是在一個(gè)單頁(yè)應(yīng)用中進(jìn)行頁(yè)面切換一樣。

通過(guò)這種方法，我們可以在提升用戶體驗(yàn)的同時(shí)，更加細(xì)致地控制頁(yè)面切換過(guò)程中的滾動(dòng)行為。同時(shí)，這種方式也覆蓋了超出當(dāng)前視窗范圍的內(nèi)容，避免了在切換頁(yè)面時(shí)的滾動(dòng)條突然出現(xiàn)或者消失的情況。