在jquery中滾動到頂部並滾動到底部

我試圖用jQuery實現從上到下和從下到上的滾動條。我最近嘗試百分比。從頂部向底部，像素看起來OK。（意味着它）的底部到頂部僅作滾動沒有完全結束，如果我提到的百分比爲100在jquery中滾動到頂部並滾動到底部

$('#spnTop').on("click",function(){ 
    var percentageToScroll = 100; 
    var percentage = percentageToScroll/100; 
    var height = jQuery(document).height(); 
    var documentHeight = $(document).height(); 
    var scroll = $(window).scrollTop(); 
    alert(scroll); 
    var scrollAmount = Math.round((height) * percentageToScroll/ 100)-scroll; 

    //alert(point); 
    alert(scrollAmount); 
    $('html,body').animate({ scrollTop: scrollAmount }, 'slow', function() { 
          alert("reached top"); }); 

});

這裏是fiddle。例如：例如： percentageToScroll現在爲100，但滾動的結束未完全結束。（從下到上）對於從上到下的是100，它會完全滾動到頁面的底部。

我不知道如何使它可行。

謝謝。

玉萍

來源

2013-10-22 Vignesh Pichamani

我不知道你想實現的東西。但您可以使用'scrollTop（）' – james

您應該使用'console.log（...）;'來進行調試，而不是'alert（...）;'因爲警報可能會破壞您的代碼。 –

這個怎麼樣？

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

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

}); 
$('#spnbottom').on("click",function() { 
    var percentageToScroll = 100; 
    var height = $(document).innerHeight(); 
    var scrollAmount = height * percentageToScroll/ 100; 
    alert(scrollAmount); 
    var overheight = jQuery(document).height() - jQuery(window).height(); 
    //alert(overheight); 
jQuery("html, body").animate({scrollTop: scrollAmount}, 900);  
});

小提琴here

來源

2013-10-22 08:53:16

+1 ...我錯過了1個百分點的技巧;） –

謝謝@ jaq316它的效果很好。 +1 –

@ jaq316快速問題從底部到頂部滾動我檢查它工作正常。例如，讓我們將底部值視爲50％（從底部到頂部滾動爲50％），然後它是如何工作的？從上到下只有50％？如果是的話意味着我怎樣才能使滾動從下到上爲50％。希望你明白我的觀點？ –

現在看到您需要的百分比

觀看演示在這裏： http://jsfiddle.net/a3g4d/

$('#spnTop').on("click",function(){ 
    var percentage = 100; 
    var height = $(document).height(); 
    var remove = +height/+100 * +percentage; 
    var spaceFromTop = +height - +remove; 
    $('html,body').animate({ scrollTop: spaceFromTop }, 'slow', function() {}); 
});

來源

2013-10-22 08:44:35 Stewartside

我認爲他需要的百分比部分 –

我認爲他想使用的百分比（例如：30％，73％），這將只適用於100％ –

財產以後這樣:)希望幫助您

$('#spnTop').on("click",function(){ 
    $('html,body').animate({ scrollTop: 0 }, 'slow', function() { 
          }); 

}); 
$('#spnbottom').on("click",function() { 
    var window_height = $(window).height(); 
    var document_height = $(document).height(); 
    $('html,body').animate({ scrollTop: window_height + document_height }, 'slow', function() { 
           }); 
});

demo

來源

2013-10-22 08:46:44

滾動百分比怎麼樣？ –

爲什麼滾動百分比？它工作正常沒有百分比 –

@AramMkrtchyan是的，它可以工作，但30％的滾動？ –

如果始終有頂部和底部跨度，您還可以使用跨度位置。

$('#spnTop').on("click",function(){ 
    $('html,body').animate({ 
     scrollTop: $("#spnbottom").offset().top 
    }, 'slow', function() { 
     alert("reached top"); 
    }); 
});

http://jsfiddle.net/4qLvC/8/

來源

2013-10-22 08:49:10

這是關於％值，這就是問題 –

正如我在評論中指定我準備了一個Demo

$(document).on("click","#spnTop",function(){ 
    $('html,body').animate({scrollTop: 0}, 1500); 

}); 
$(document).on("click","#spnbottom",function() { 
    var window_height = $(window).height(); 
    var document_height = $(document).height(); 
    $('html,body').animate({ scrollTop: window_height + document_height },1500); 
});

我希望它可以幫助你

來源

2013-10-22 09:08:11 james

jQuery(document).ready(function($){ 
    $('#goToTop').on("click",function(){ 
     $("html, body").animate({ scrollTop: 0 }, 2000); 
     return false; 
    }); 
    $('#goToBottom').on("click",function() { 
     $("html, body").animate({scrollTop: $(document).innerHeight()}, 2000); 
     return false;  
    }); 
});

來源

2015-03-28 07:50:28 mostofa

這將是很好，如果你解釋你的代碼。 – nicael

這裏是滾動到一些有用的鏈接頂部和滾動到底部在Jquery 瓦特ith demo。

Scroll to Top and Scroll to Bottom in Jquery

$(function() { 
    $("#scrollToBottom").click(function() { 
     $('html, body').animate({ scrollTop: window.screen.height }, 400); 
    }); 
    $("#scrollToTop").click(function() { 
     $('html, body').animate({ scrollTop: 0 }, 400); 
    }); 
});

來源

2015-04-29 09:43:32

在jquery中滾動到頂部並滾動到底部

回答

相關問題