forum

Home / DeveloperSection / Forums / Top and Bottom scroll using JQuery

Top and Bottom scroll using JQuery

Anonymous User306122-Oct-2013

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>

Updated on 22-Oct-2013
I am a content writter !

Can you answer this question?


Answer

1 Answers

Liked By