---
title: "Top and Bottom scroll using JQuery"  
description: "Top and Bottom scroll using JQuery"  
author: "Anonymous User"  
published: 2013-10-22  
updated: 2013-10-22  
canonical: https://www.mindstick.com/forum/1702/top-and-bottom-scroll-using-jquery  
category: "jquery"  
tags: ["jquery"]  
reading_time: 1 minute  

---

# Top and Bottom scroll using JQuery

Below is my [JQuery code](https://www.mindstick.com/forum/157821/write-a-jquery-code-that-selects-all-the-checkboxes-in-a-form-when-a-select-all-button-is-clicked)

```
<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>
```

## Replies

### Reply by Samuel Fernandes

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


---

Original Source: https://www.mindstick.com/forum/1702/top-and-bottom-scroll-using-jquery

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.