Best SEO CompaniesIn this post I will walk through the tutorial showing you how to create a smooth page scrolling effect allowing you to scroll to the top or bottom of your web page in a smooth action using jQuery.
If you are not sure what animation I am referring too, then take a look at the demo first. You will see a link at the top of the page called ‘Scroll to bottom‘ and a link at the bottom of the page called ‘Scroll to top’. Both of these links will allow you to scroll smoothly to either the top or bottom of the web page.
Table of Contents
How it works
First we need to include jQuery before the closing </head> tag in our web page, for the demonstration I have used this method:
[php]<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>[/php]
jQuery Scroll to bottom:
First I place the link in my page to tell the user to ‘Scroll to bottom’, when this is clicked the page will smoothly scroll.
The link:
[php]<a href="#" class="scrollToBottom">Scroll to bottom</a>[/php]
The jQuery:
[php]
<script type="text/javascript">
$(document).ready(function(){
// Scroll page to the bottom
$(‘a.scrollToBottom’).click(function(){
$(‘html, body, .content’).animate({scrollTop: $(document).height()}, 300);
return false;
});
})
</script>
[/php]
How it works:
If your new to jQuery then all our first line of code is doing is checking the page has loaded before the remaining code is executed –
[php]$(document).ready(function(){[/php]
The next line will execute the code contained inside the {} brackets when the link with the class ‘scrollToBottom’ is clicked.
[php]
$(document).ready(function(){
$(‘a.scrollToBottom’).click(function(){
});
})
[/php]
Within this function we then insert this code –
[php]
$(‘html, body’).animate({scrollTop: $(document).height()}, ‘slow’);
return false;
[/php]
It is fairly self explanatory to see what is happening with the code above, when a link with the class ‘scrollToBottom’ is clicked the code inside the function will run, the smooth scroll effect is created using the scrollTop function. The code above will scroll to the bottom of the page, using the height of window to determine the bottom. The speed of this is controlled using ‘slow’, ‘medium’ and ‘fast’ speed controls, I used ‘slow.
jQuery Scroll To Top
First, insert a link into the footer section of of your homepage , when this is clicked the jQuery code will execute the .animate function. The class applied to the link is very important as it is referenced in the jQuery.
The link:
[php]<a href="#" class="scrollToTop">Scroll to bottom</a>[/php]
The jQuery:
[php]
<script type="text/javascript">
$(document).ready(function(){
$(‘a.scrollToTop’).click(function(){
$(‘html, body’).animate({scrollTop:0}, ‘slow’);
return false;
});
})
</script>
[/php]
How it works:
When the page has loaded and the link with the class .scrollToTop has been clicked jQuery will execute this –
[php]
$(‘html, body’).animate({scrollTop:0}, ‘slow’);
return false;
[/php]
The .animate() method allows us to create animation effects on any numeric CSS properties, the scrollTop function is set to 0, this represents the scroll bar being at the very top position and ‘slow’ represents the speed at which the animation will run at.
You will have noticed this line:
[php]<code>return false;</code>[/php]
This prevents the default action of the event being triggered, in our case it prevents the user following the link.
This also could have been used:
[php]event.preventDefault();[/php]
However I found using this caused the animations to be anything but smooth.
Best SEO Companies