滾動頂部jquery

我使滾動頂部和滾動到底部jquery。在這一點上，我使用百分比滾動。例如：如果從上到下滾動是50%那麼它從上到下滾動爲50%它已經工作。但是現在我想滾動50％，如果再次單擊，則將剩餘的50％滾動到頁面底部。我不知道如何在jQuery中做到這一點。滾動頂部jquery

這裏是小提琴任何建議將是偉大的。 http://jsfiddle.net/TkYpY/

感謝，玉萍

來源

2013-10-25 Vignesh Pichamani

你的問題不清楚 - 你想達到什麼目的？一次滾動總距離的50％似乎很奇怪，因爲你永遠不會到達頂部或底部。 –

在你的jsfiddle中，即使頂部和底部也不起作用。你有沒有考慮過檢查[scrollTo]（http://flesler.blogspot.com/2007/10/jqueryscrollto.html）？它非常方便，可能會幫助你很多。 –

$('#spnTop').on("click", function() { 
var percentageToScroll = 50; 
var percentage = percentageToScroll/100; 
var height = $(document).height() - $(window).height(); 
if(scrollAmount > 0) 
{ 
scrollAmount = scrollAmount - (height * percentage); 
} 

console.log('scrollAmount: ' + scrollAmount); 
$('html,body').animate({ 
    scrollTop: scrollAmount 
}, 'slow', function() { 
    console.log("reached top"); 
}); 

}); 

var scrollAmount = 0; 
$('#spnbottom').on("click", function() { 
var percentageToScroll = 50; 
var percentage = percentageToScroll/100; 
var height = $(document).height() - $(window).height(); 

if( scrollAmount < height) 
{ 
scrollAmount = scrollAmount + height * percentage; 
} 
console.log('scrollAmount: ' + scrollAmount); 
jQuery("html, body").animate({ 
    scrollTop: scrollAmount 
}, 900); 
});

來源

2013-10-25 12:42:29

它不會在第二次點擊滾動，你已經達到了scrollAmount。

如果您想進一步滾動，請在函數外面聲明var scrollAmount，並且當您再次點擊底部鏈接時，計算下一個滾動值，其中max是文檔高度，並將其添加到全局scrollAmount聲明的var。

來源

2013-10-25 09:33:18

$('#spnTop').on("click", function() { 
var percentageToScroll = 80; 
var percentage = percentageToScroll/100; 
var height = $(document).scrollTop(); 
var scrollAmount = height * (1 - percentage); 

console.log('scrollAmount: ' + scrollAmount); 
$('html,body').animate({ 
    scrollTop: scrollAmount 
}, 'slow', function() { 
    console.log("reached top"); 
});

}）;

var scrollAmount = 0; 
$('#spnbottom').on("click", function() { 
var percentageToScroll = 50; 
var percentage = percentageToScroll/100; 
var height = $(document).height() - $(window).height(); 
scrollAmount = scrollAmount + height * percentage; 
console.log('scrollAmount: ' + scrollAmount); 
jQuery("html, body").animate({ 
    scrollTop: scrollAmount 
}, 900); 
});

來源

2013-10-25 09:37:16

我剛剛在你的jsfiddle中修改了兩行。 var scrollAmount = 0;和scrollAmount = scrollAmount + height * percentage; –

謝謝@Girish Sakhare它的工作原理。你能告訴我從底部到頂部做同樣的事嗎？ –

嗨@Vicky只做同樣的事情 - scrollAmount，如果它> 0。scrollAmount = scrollAmount - （height *（1 - percentage））; –

我修改了一下你的小提琴。對我來說似乎有一些計算問題。 Here is your fiddle。這是你需要的嗎？

首先用默認值聲明一個全局變量height。

在頂部滾動碼，與 height -= $(document).height() - $(window).height();

取代 var height = $(document).scrollTop(); 和底部滾動與height += $(document).height() - $(window).height();替換此var height = $(document).height() - $(window).height();。

來源

2013-10-25 09:37:31

我試過你的代碼，這是我想要的。從底部到頂部30％滾動到頂部，然後再次點擊100％。我想它本身就是30％。例如，如果我提到20％意味着五次點擊達到最高。希望你明白了我的觀點是否有一種方法可以顯示與 –

相同的輸出你可以使用一個包含你提到的百分比的變量，即20％或30％或任何你想要的。在函數內部，您可以相應地添加或減去此變量。 –

從你的小提琴本身的感謝從底部到頂部只有一次，然後再次如果我點擊它去頂部沒有相應的百分比，你注意到了嗎？ –

滾動頂部jquery

回答

相關問題