Home > DeveloperSection > Forums > Top and Bottom scroll using JQuery
jacob rasel
jacob rasel

Total Post:88

Points:616
Posted on    October-22-2013 3:44 AM

 JQuery JQuery 
Ratings:


 1 Reply(s)
 1752  View(s)
Rate this:

Below is my JQuery code

<script type="text/javascript">

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

        });

 

    });

    $('#spnbottom').on("click", function () {

        var percentageToScroll = 100;

        var height = jQuery(document).innerHeight();

        var documentHeight = $(document).height();

        var scrollAmount = Math.round(height * percentageToScroll / 100);

        alert(scrollAmount);

        var overheight = jQuery(document).height() - jQuery(window).height();

        jQuery("html, body").animate({ scrollTop: scrollAmount }, 900);

    });

</script>

 

My HMTL Code: -

<span id="spnbottom">Bottom</span>

<div id="testDiv" style="height: 5000px; width: 400px; background: Red;">

</div>

<span id="spnTop">Top</span>



Samuel Fernandes
Samuel Fernandes

Total Post:156

Points:1096
Posted on    October-22-2013 3:58 AM

You can write below line:

$(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


Don't want to miss updates? Please click the below button!

Follow MindStick