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>

Andrew Pallant (@LdnDeveloper) has been a web, database and desktop developer for over 16 years. Andrew has worked on projects that ranged from factory automation to writing business applications. Most recently he has been heavily involved in various forms for ecommerce projects. Over the years Andrew has worn many hats: Project Manager, IT Manager, Lead Developer, Supervisor of Developers and many more - See more at: http://www.unlatched.com/#sthash.8DiTkpKy.dpuf

Posted in Developement, jQuery, Web Tagged with:

Leave a Reply

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

*