I tried to implement the scroller with top to bottom and bottom to top with jquery. I recently tried with percent. From the Top to bottom with pixel is seems ok.(Means it works) for the bottom to top is only make scroll not completely finish if i mention percentage as 100

$('#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");    });

});

Here is the fiddle. For Example: percentageToScroll is now 100 but the ending of scroll is not completely finish. (from bottom to top) For top to bottom is 100 then it completely scroll to bottom of the page.

I am not sure how to make it workable.

Thanks.

Vicky

I tried to implement the scroller with top to bottom and bottom to top with jquery. I recently tried with percent. From the Top to bottom with pixel is seems ok.(Means it works) for the bottom to top is only make scroll not completely finish if i mention percentage as 100

$('#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");    });

});

Here is the fiddle. For Example: percentageToScroll is now 100 but the ending of scroll is not completely finish. (from bottom to top) For top to bottom is 100 then it completely scroll to bottom of the page.

I am not sure how to make it workable.

Thanks.

Vicky

• javascript
• jquery
• html
• css

• 2 I don't know what you are trying to implement. But you can use scrollTop() – James Commented Oct 22, 2013 at 8:42
• 4 You should use console.log(...); for debugging, instead of alert(...); as alert can disrupt your code. – Richard de Wit Commented Oct 22, 2013 at 8:44

7 Answers 7

What about this?

$('#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);    
});

Fiddle here

As I specified in comment I prepared a 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);
});

I hope it may help you

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;    
    });
});

Now see you need the percentages

See demo here: 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 () {});
});

You can also use the span positions if you have top and bottom span always.

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

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

I hope something like this :) might help you

$('#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 () {});
});

Use this link to try it out : demo

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