Smooth scrolling to page top and bottom using jQuery

by  
Share:
Smooth scrolling to page top and bottom using jQuery

If you have a lengthy article that consists of multiple sections and the topics are related to each other. You can link them using named anchor, but it does not give a smooth scroll effect. In this tutorial you will see how to apply Smooth scrolling effect when user go to the bottom section of a page or when user go at the top section of a page. User can also scroll to a particular section of a page using the same technique. This technique is used in this my blog also.

View Demo

Adding jquery dependency and page top container

Since the tutorial is based on jquery make sure you have included jquery library file inside your page.

// including jquery library from my local server
<script src="jquery-2.1.3.min.js"></script>

Just below the body tag add an element that serves as a page top container i.e. when user wants to go to the top element it will reach upto this element. You can add id or class also as per your style.
<body>
<div class="mainTitle" >my page top container</div>
.....
.....
.....
.....
</body>

Applying smooth scrolling to page bottom effect

First of all you have to add an image/text indicating that if user clicks on this element it will scroll down to the bottom of page.

<!-- Add a class to the element -->
<span class="scrollBottom">
<img src="scroll_down.png" width="24" height="24" title="Scroll to bottom"> Scroll to bottom
</span>

At the top/bottom of the page bind the class scrollBottom to click event. You will need to calculate the difference between page scroll height and the page height.
<script type="text/javascript">
$(document).ready(function() {

     // Binding event for user if they clicks on scroll to bottom icon
     $('.scrollBottom').click(function() {
          var windowHeight = $(window).height();
          var scrollHeight = $('body')[0].scrollHeight;
          $("html, body").stop().animate({scrollTop: scrollHeight - windowHeight});
     });
});
</script>

Applying smooth scrolling to page top effect

Just like above, add an image/text indicating that if user clicks on this element it will scroll to top of the page. But in this case there is one catch. it’s a good idea to display the icon/image when the user has scrolled to mid/bottom of the page. Makes sense? In other words you don’t want to display an icon that says “scroll to top” when you are at the top of page. I have fixed the icon position at the bottom right section of the page using CSS. it will be only visible when user scroll down to mid/bottom of page (using jquery).

<style>
.scrollTop { position: fixed; cursor: pointer; right: 10px; bottom: 60px; opacity:0.5; display: none; z-index: 999999; }
.scrollTop:hover { opacity:1; }
</style>
<div class="scrollTop"> <img src="scroll_up.png" width="48" height="48" title="Scroll to top"> </div>

Bind the class scrollTop with click event. Also display/hide the icon based on page height.
<script type="text/javascript">
$(document).ready(function() {

     // Binding event for user if they clicks on scroll to up icon
     $('.scrollTop').click(function() {
          $("html, body").animate({scrollTop: 0});
     });

     // if user scrolls down the page then make the
     // scroll to top icon visible else hide it
     $(window).scroll(function() {
       if ($(this).scrollTop() > pos.top + topPart.height()) {
          $('.scrollTop').show();
       } else if ($(this).scrollTop() <= pos.top) {
          $('.scrollTop').hide();
       }
     });
});
</script>

Applying smooth scrolling to a particular element

Well this one is the easy. Just like above, add an image/text indicating that if user clicks on this element it will scroll to a particular section of a page.

<span class="scrollMidsection">
<img src="scroll_down.png" width="24" height="24" title="Scroll to middle"> Scroll to middle
</span>

Add an element using id or class where the user will reach after clicking on the icon/text.
<!-- 
Add this section somewhere in the middle of a page
You can also use div/span as a container
--> 
<h2 class="midsection">
This is the mid section 
</h2>

Just the final part, bind the class scrollMidsection with click event.
<script type="text/javascript">
$(document).ready(function() {

   // Binding event for user if they clicks on scroll to middle icon
   $('.scrollMidsection').click(function() {
           $("html,body").stop().animate({scrollTop:$('.midsection').offset().top}); });

   });
</script>

View Demo
Share to download the Source Codes for FREE!
We're glad to give free downloads, but we need your love to carry on making that.
Please support us by sharing the page.

Get the latest updates directly in your inbox for FREE: Subscribe here

Share your feedback / let me know your doubts regarding this tutorial in the comment box given below.

Share:
Hasan

Shahrukh Khan (Hasan)

A software engineer who's a die-hard coder, blogger, dreamer and mentor with years of expertise in web development. Know more...

Related Posts

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.