jQuery scroll to anchor point

Nowadays it is very popular to use animated scrolling between anchor points. Mostly, portfolio websites are using this technique.

Now I show you how to create a website with a few anchor points and  jQuery scrolling.

HTML markup

<a href="#about">About us</a>
<a href="#contact">Contact</a>
<div id="about"></div>
<div id="contact"></div>

jQuery

This script changes the default jump to anchor function with animated scrolling. I added -40 after top, which means the browser will scroll 40 pixels above the target. I also added #top for the first element of the webpage, to make sure scroll to top will work fine.

<script src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('a[href^="#"]').bind('click.smoothscroll',function (e) {
	    e.preventDefault();
	 
	    var target = this.hash,
	    $target = $(target);
	 
	    $('html, body').stop().animate({
	        'scrollTop': $target.offset().top-40
	    }, 900, 'swing', function () {
	        window.location.hash = target;
	    });
	});
});
</script>

CSS

I like to have a fixed navigation on top, so I use the following CSS for my website.

<style type="text/css">
body{
	margin:0;padding:0;
	margin-top:20px;
}
#navigation{
	position:fixed;
	top:0;
	background:#CCC;
	width:100%;	
	text-align:center;
}
ul{
	display:inline;
	width:100%;
	list-style:none;
}
li{
	width:25%;
	display:inline;
	padding:10px;
}
#wrap{
	width:50%;
	margin:auto;
}
</style>

Demo »


Go Daddy


Related articles

Redirect www to non www with .htaccess RewriteRule

Redirect www to non www with .htaccess RewriteRule

05/12/2015

Redirect your websites visitors from www.domain.com to domain.com without www.

Pie Chart with Flot jQuery Plugin

Pie Chart with Flot jQuery Plugin

28/02/2013

Learn how to use the pie plugin for Flot charts.

Draw Graph with Flot jQuery Chart

Draw Graph with Flot jQuery Chart

26/02/2013

Flot is a brilliant jQuery Graph drawning plugin developed by Ole Laursen and David Schnur.


11 comments

Sanjay Tailor2015-04-21 10:42

Hi, I'm trying to apply this to a newform.aspx page in SharePoint designer.I've successfully added the anchor points and have applied the jQuery to the page however it only jumps to the anchor point rather than scroll. This animation is not applied to the "Modal" window that is native to SharePoint. When I open the same form in full size, the animation works fine.Does anyone know how to get the animation to work in the SharePoint Modal Dialog window?Thanks,

Jens2014-12-21 18:32

I had problems in safari and firefox because of the offset it went to right place at first but then jumped back to the place without the offset but found the fix for this
Just delete this part:

, function () {
window.location.hash = target;

Jens2014-12-21 18:31

I had problems in safari and firefox because of the offset it went to right place at first but then jumped back to the place without the offset but found the fix for this:just delete this part, function () { window.location.hash = target;Hope this works :)

Dan2014-07-17 12:37

Thanks! Works good, but if you´re on any other position of the page but the top, it doesn´t scroll to the defined element.

Robert2014-01-07 22:09

Thank you, this is a scroll to top that works with Firefox 26.0\r\n\r\nRobert

Ruben Ruiz2013-12-23 22:53

Thanks!

dogboy2013-08-15 20:28

If you're getting jumpy effect in Firefox or other just remove the -40 from .top-40

Rex2013-08-15 18:03

w00t! Finally a script that works! ;) Thanks!

Steven2013-04-22 19:44

Brilliant, works 1st time.. Thanks

Dave2013-03-22 08:42

This works great in Safari and Chrome but jumps around in Firefox and IE. Any fixes for this?

Shane2013-01-09 10:11

Great script! Thank you!

Leave a comment

We welcome any comment from you! Please keep in mind that comments are moderated and rel='nofollow' is in use. So, please do not use a domain as your name or a spammy keyword, or your comment will be deleted.

Name: *

E-mail: *

Message: *

Click on the car *


Find us on Facebook

Tags

Get online with the world's Best - GoDaddy.com!

Back to Top