Animated page scrolling to specific id within the document with jquery. Article contains a jquery plugin you can use for simple “back to top” links or complex single-page websites menus, as well as a single-page CSS template with additional features.
Page scroll to id plugin
Download the archive which contains the plugin files, as well as examples and a single-page css template. Extract files and upload jquery.malihu.PageScroll2id.js to your web server.
Include jquery, jquery UI and jquery.malihu.PageScroll2id.js in your html document
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script src="jquery.malihu.PageScroll2id.js"></script>
The code above can be inserted inside the head tag or at the very bottom of your document, before the closing body tag (which is normally recommended for better performance). We’re using Google’s CDN to get jquery and jquery UI libraries (why?).
What these files do
jquery is the javascript library used by the Page scroll to id plugin (I’m making the crazy assumption here that you do know what jquery is. In case you don’t, here it is).
jquery UI (jQuery User Interface) extends jquery library and provides animation easing (you can make your own custom jquery UI bundle if you wanna cut down the size, see http://jqueryui.com/download).
jquery.malihu.PageScroll2id.js is our plugin file
Call mPageScroll2id function on window load (after the inclusion of the plugin files), either in the head or body tag
<script>
(function($){
$(window).load(function(){
$("a[rel='m_PageScroll2id']").mPageScroll2id();
});
})(jQuery);
</script>
Note that we’re wrapping our jquery code with (function($){ ... })(jQuery);. This ensures no conflict between jquery and other libraries using $ shortcut. See Using jQuery with Other Libraries for more info. We also use window load ($(window).load()) so the code executes after all page elements are fully loaded.
The a[rel='m_PageScroll2id'] selector used here means that the plugin will apply to any anchor element with m_PageScroll2id rel attribute value (e.g. <a href="#targetID" rel="m_PageScroll2id">link</a>).
When we click <a href="#targetID" rel="m_PageScroll2id">link</a>, the page will scroll to the element with id="targetID" within the document. So all that’s left to do, is create your unique id sections (e.g. <div id="myID">Section</div>) and the links that point to these sections within your page (e.g. <a href="#myID" rel="m_PageScroll2id">Go to section</a>).
You can change the function call selector to anything you want (an id, class name etc.). For instance, if you want the script to apply to all links with class name “myClass”, you simply do:
$("a.myClass").mPageScroll2id();
You can also have multiple selectors by inserting comma separated values. For example the following applies to a)every anchor element that’s inside a container with an id of navigationMenu, b)every link with href attribute value #top and c)every link with rel attribute value m_PageScroll2id
$("#navigationMenu a,a[href='#top'],a[rel='m_PageScroll2id']").mPageScroll2id();
That’s all you need to use the plugin. The code below is a most basic html example of a single-page using it:
<!DOCTYPE HTML>
<html>
<head>
<style>
#section_1,#section_2,#section_3{
height:1000px;
}
</style>
</head>
<body id="top">
<ul class="navigation-menu">
<li>
<a href="#section_1" rel="m_PageScroll2id">section 1</a>
</li>
<li>
<a href="#section_2" rel="m_PageScroll2id">section 2</a>
</li>
<li>
<a href="#section_3" rel="m_PageScroll2id">section 3</a>
</li>
</ul>
<div id="section_1">
Section 1 content
</div>
<div id="section_2">
Section 2 content
</div>
<div id="section_3">
Section 3 content
</div>
<a href="#top" rel="m_PageScroll2id">Back to top</a>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script src="jquery.malihu.PageScroll2id.js"></script>
<script>
(function($){
$(window).load(function(){
$("a[rel='m_PageScroll2id']").mPageScroll2id();
});
})(jQuery);
</script>
</body>
</html>
Configuration
mPageScroll2id function can get the following option parameters in order to customize its behavior and basic functionality:
scrollSpeed: Integer |
Scroll animation speed, value in milliseconds |
autoScrollSpeed: Boolean |
Auto-adjust animation speed according to element position, values: true, false |
scrollEasing: String |
Scroll animation easing type when page is idle, see jquery UI easing for all available easing types |
scrollingEasing: String |
Scroll animation easing type when page is animated, see jquery UI easing for all available easing types |
callback: function(){} |
User custom callback function to run after a scrolling animation is completed. Example:
callback:function(){
alert("callback");
}
|
pageEndSmoothScroll: Boolean |
End of page smooth scrolling (if bottom elements are too short), values: true, false |
layout: String |
Page layout defines scrolling direction, values: vertical, horizontal, auto
Setting layout: "auto" scrolls page both horizontally an vertically. See the demo
|
An example of defining these options parameters and their default values is as follows
$("a[rel='m_PageScroll2id']").mPageScroll2id({
scrollSpeed:1300,
autoScrollSpeed:true,
scrollEasing:"easeInOutExpo",
scrollingEasing:"easeInOutCirc",
callback:function(){},
pageEndSmoothScroll:true,
layout:"vertical"
});
Deep linking
There are many solutions for deep linking. The code below is an example of Page scroll to id plugin combined with Asual’s jquery address plugin:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script src="jquery.malihu.PageScroll2id.js"></script>
<!-- include jquery address plugin -->
<script src="jquery.address-1.4.min.js"></script>
<script>
(function($){
$(window).load(function(){
/* call both mPageScroll2id and address functions on our selector */
$("a[rel='m_PageScroll2id']").mPageScroll2id().address();
/* call "externalChange" method of jquery address plugin to scroll page on browser back/forward */
$.address.externalChange(function(event){
if(event.value){
var eVal=event.value.replace("/","");
if(eVal===""){
eVal="top";
}
/* call "history" method of mPageScroll2id and pass jquery address hash value */
$().mPageScroll2id("history",{
scrollTo:eVal
});
}
});
});
})(jQuery);
</script>
By calling the “externalChange” method of jquery address plugin and passing its returned value via Page scroll to id “history” method, the page will scroll to the corresponding id each time we hit browser’s back/forward buttons or change the url in the address bar. Deep linking demo
- May 31, 2012
- Developed jquery plugin out of the original Animate page to id script
Created single-page CSS template
License
You are free to use, study, improve and modify this script wherever and however you like.
This work is licensed under a Creative Commons Attribution 3.0 Unported License.
Wordpress plugins are licensed under GNU General Public License.
Donating helps greatly in developing and updating free software and running this blog :)
1
21
