Example of Smooth Scrolling
Published: Nov 27, 2013 01:59:24
Physical Link: Example of Smooth Scrolling
For one of my projects I came up with a simple jQuery example to create a smooth scrolling effect. The nuts and bolts of the script is the following.
<script type="text/javascript">
$.browser.chrome = /chrom(e|ium)/.test(navigator.userAgent.toLowerCase());
$(document).ready(function ($) {
$(".scroll").click(function (event) {
event.preventDefault();
if ($.browser.chrome) {
$('html,body').animate({ scrollTop: $(this.hash).offset().top}, 1000);
} else {
$('html,body').animate({ scrollTop: $(this.hash).offset().top - 100 }, 1000);
}
});
});
</script>
Whatever anchor element <a> has the scroll class assigned to it, it will inherit a click event that will auto scroll to the specified anchor. The anchor must have an id and the name that is the same in order for the scroll to work.
My solution is a mash up of various solutions found on the internet, but this variation worked for me.
Hope you find my example as easy to use as I did.
Full Example for Smooth Scrolling [Demo]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Sample of Smooth Scrolling</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script>
</head>
<body>
<a name="hit_top" id="hit_top"></a>
<a class="scroll" href="#hit_bottom"> Scroll To Bottom </a> |
<a class="scroll" href="#hit_middle"> Scroll To Middle </a> |
<a class="scroll" href="#hit_one"> Scroll To One </a> |
<a class="scroll" href="#hit_two"> Scroll To Two </a> |
<div style="background-color:#ffee44;">
<div style="margin-top:500px;padding-top:100px;background-color:#ff2288;">
<a name="hit_one" id="hit_one"></a> You have hit One<br /><br />
<a class="scroll" href="#hit_bottom"> Scroll To Bottom </a> |
<a class="scroll" href="#hit_middle"> Scroll To Middle </a> |
<a class="scroll" href="#hit_two"> Scroll To Two </a> |
<a class="scroll" href="#hit_top"> Scroll To Top</a>
</div>
<div style="margin-top:500px;padding-top:100px;background-color:#ff2200;">
<a name="hit_two" id="hit_two"></a> You have hit two<br /><br />
<a class="scroll" href="#hit_bottom"> Scroll To Bottom </a> |
<a class="scroll" href="#hit_middle"> Scroll To Middle </a> |
<a class="scroll" href="#hit_one"> Scroll To One </a> |
<a class="scroll" href="#hit_top"> Scroll To Top</a>
</div>
<div style="margin-top:2000px;padding-top:100px;background-color:#ff2288;">
<a name="hit_middle" id="hit_middle"></a> You have hit the middle.
<a class="scroll" href="#hit_bottom"> Scroll To Bottom </a> |
<a class="scroll" href="#hit_one"> Scroll To One </a> |
<a class="scroll" href="#hit_two"> Scroll To Two </a> |
<a class="scroll" href="#hit_top"> Scroll To Top</a>
</div>
<div style="margin-top:1500px;padding-top:100px;background-color:#ff2288;">
</div>
</div>
<a name="hit_bottom" id="hit_bottom"></a> You have hit the bottom.
<br />
<a class="scroll" href="#hit_top"> Scroll To Top</a>
<script type="text/javascript">
$.browser.chrome = /chrom(e|ium)/.test(navigator.userAgent.toLowerCase());
$(document).ready(function ($) {
$(".scroll").click(function (event) {
event.preventDefault();
if ($.browser.chrome) {
$('html,body').animate({ scrollTop: $(this.hash).offset().top}, 1000);
} else {
$('html,body').animate({ scrollTop: $(this.hash).offset().top - 100 }, 1000);
}
});
});
</script>
</body>
</html>
Author: Andrew PallantCategories: Developement, jQuery, Web