Smooth page scroll with jQuery

Posted on by jordanhaines

A project I did a few months ago required us to use anchor tags as the pages of information where getting a bit to long for our liking. We don’t mind using them at all, but we did not want the page just to jump to the bottom of the page or just jump to the top of the page. We wanted the page to smoothly scroll to the bottom or top as we thought that this would be a bit more visually appealing.

In this post I will walk you through setting up a demo and giving you the code to make this happen. You can download the source code in Zip format here.

Lets Begin!!!

First we need to set up the folder and file structure that we will be using here. First create a folder called jQuery Page Scroll, In side this folder create a file called index.html and then create two folders called scripts and style. Within the scripts folder create a file called function.js and then in the style folder create a file called style1.css. This will give you your file and folder setup that we will be using in the post.

Lets turn our attention to our index.html file and start to fill that out with what we want. For this post all we are going to is put a load of dummy text into a div and style it quite narrow just to make sure we have to scroll. At the top of the dummy text we will add a link to an anchor at the bottom of the page, then at the bottom of the page we will add a link to an anchor at the top of the page.

Below you can see the html that you will need to copy and paste into your html file:

{code type=html}


Title Here



Click to go to bottom

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac lorem quis ante tristique rhoncus vel non dolor. Curabitur suscipit, nulla nec elementum interdum, augue lacus egestas elit, eget consequat dolor nisi in ipsum. Fusce convallis, nulla quis facilisis pulvinar, arcu eros porta orci, sed imperdiet ante mi in nibh. Suspendisse a scelerisque metus. Maecenas in tortor eros. Sed sagittis neque ut quam volutpat ornare eu non justo. Nullam rhoncus sagittis erat eget dapibus. Pellentesque non pretium est.

Aenean ullamcorper massa vitae tellus scelerisque interdum. Vivamus id erat sit amet dolor porttitor suscipit. Sed ut lectus sit amet dui viverra tincidunt accumsan sit amet magna. Morbi pulvinar ultricies sapien, a tincidunt eros molestie sed. Donec sem felis, condimentum vitae varius ut, porttitor vel nunc. Praesent eget tortor sit amet purus faucibus pharetra sed quis nibh. Aenean justo augue, tempus sit amet volutpat id, rhoncus pellentesque augue. Donec cursus facilisis bibendum. Fusce quis leo sit amet lacus egestas ullamcorper ac non diam. Ut vel dolor sed tellus aliquet rhoncus mollis a quam.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in libero odio, sed fringilla arcu. Nulla luctus blandit magna, in eleifend nibh pretium vel. Mauris mollis nulla ac quam consequat pretium a eget nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi sed lorem lectus, vel semper sem. Vestibulum quam velit, lobortis at varius rutrum, rutrum id enim. Vestibulum sed nisl vitae augue viverra elementum.

Maecenas magna nunc, auctor quis tempus sed, posuere sed velit. Donec vehicula aliquet pulvinar. Nullam non leo leo. In suscipit euismod congue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed fermentum tristique fringilla. Aliquam accumsan, enim in lobortis fermentum, lorem sapien mollis turpis, quis vehicula urna lectus et purus. Nulla consequat sapien vitae nisi facilisis sed dapibus turpis dapibus. Aenean pellentesque, sem quis varius egestas, ipsum ipsum congue dui, ac condimentum tellus nisi sit amet elit.

Proin lobortis mattis tortor, sit amet auctor sem ultricies non. Donec dapibus, mi ac fermentum tempor, nisl urna pharetra massa, et porttitor lectus quam eget ligula. Donec gravida faucibus neque sed bibendum. Nam in purus ut felis pretium condimentum. Integer sodales eleifend felis, semper tempus lorem pulvinar non. Suspendisse quis lacus ante, sed viverra nunc. Suspendisse sodales orci vel sem porta scelerisque. Sed hendrerit laoreet pretium.

Click to go to top



{/code}

The CSS is very simple, all we are doing is making the page wrap div very thin just to make sure we get scrolling. The CSS which you need is below:

{code type=css}
#page-wrap { width: 400px; margin: 20px auto;}
{/code}

The jQuery that will be using is very simple and in total only comes to 12 lines, now I am no expert in jQuery so the hardcore developers out there could properly find a better way of doing this, but this way works for me and is easy to understand. The jQuery code is below as follows:

{code type=javascript}
$(document).ready(function(){

$(‘.bottom’).click(function(){
$(‘html, body’).animate({scrollTop: $(‘.top’).offset().top},’slow’);
});

$(‘.top’).click(function(){
$(‘html, body’).animate({scrollTop: ‘0px’},’slow’);
});

});
{/code}

The jQuery is rather simple, if we take the first function, all we are doing is adding a click event to the html link with a class of bottom. Within the click event we add a function where we add the animate effect to the html and body elements of the our web page. With in the animate effect we add a scrollTop attribute and give the class name of the anchor we want to scroll to. We then add the speed of which we want to scroll, we have set it to slow.

This is my way of using jQuery to give a smooth page scroll, it works for me and has not given me any problems so hope you find it helpful.

This entry was posted in JQuery and tagged , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *