TOP AND BOTTOM SCROLL USING JQUERY

jacob rasel

Total Post:88

Points:616
Posted by  jacob rasel
JQuery 
 2302  View(s)
Ratings:
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>
  1. Samuel Fernandes

    Post:159

    Points:1117
    Re: Top and Bottom scroll using JQuery

    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

      Modified On Apr-03-2018 05:34:26 AM

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!