How to Scroll to an Internal Link with jQuery

One page scrolling sites have experienced a huge growth in popularity in web design in recent years. Although this type of site isn’t for everyone, it is still useful to know how they work. Today, I will teach you how to create a very simple one page scrolling site using jQuery.

How to Scroll to Internal Link with jQuery

This is what we will be building:

OK, lets get on with it…

The HTML

This page will have very basic HTML – just enough for a navbar and some content.

Here’s the idea behind this: the “nav” has a width of 100% to be the full width of the browser. This “nav” has the “position” property set to “fixed”, so that it scrolls with the user. We then hav a “ul” inside it to hold the navigation.

Take a look at the links – they all point to a particular paragraph.

This is useful in two ways:

If the user has javascript disabled, the links still work.

Using jQuery, we’ll read the “href” attribute off of each link.

Now that we have a simple navigation bar set up, we can do the main content of the page.

The body has some simple text and background-color styling, and the content has a width of 500px and is centered. The content div also has a padding-top set to 40px – this is so that the navbar doesn’t block the top 40px of the content. The height is set to 2000px so there is enough space for the content to scroll. This isn’t necessary most of the time. Each paragraph has a “margin-bottom” of 25px, so we can tell where one paragraph ends and the other starts.

The “nav” has a width of 100% so it takes up the whole browser width. It also has “position:fixed” so that it stays on screen when the user scrolls. The height is set to 40px, which is reasonable size for a top navbar. There’s also some simple styling just to make it look nice.

The “ul” has a width of 750px so there is enough space for each link, and it’s centered. Each “li” is floated to the left so that all the links are on one line. Finally, there’s some simple link styling.

The jQuery

Here’s how this will work: There’s going to be a click function for each nav link, which will then execute a function to scroll to the div the link is pointing to.

As always, start off with a document.ready function.

$(document).ready(function(){
});

Now, before we write the click function, we’ll write the “scrollToDiv” function that will (surprisingly) scroll to a div of our selection. There are going to be 2 parameters – the element to scroll to, and the height of the navigation at the top of the page.

function scrollToDiv(element,navheight){
}

We now declare 3 variables that we need to be able to scroll accurately.

The “offset” variable is the offset of the element, and the “offsetTop” variable uses the “offset” variable to withdraw the “top” value. As a result, we get the distance of an element from the top of the page. The “totalScroll” variable is how much the browser should scroll. Without a top navigation bar, the amount to scroll would just be the offset of an element. However, since we have a navigation bar that blocks the top 40px of the content from view, we have to edit the variable accordingly. This is what the “navheight” parameter is for.

Lastly, we scroll the page:

$('body,html').animate({
scrollTop: totalScroll
}, 500);

The jQuery “animate” function can also animate the scrollTop of a page, which allows us to smoothly scroll to a desired spot on the page. Here, the animation takes 500 milliseconds.

Alexandre Smirnov is a web developer and designer who lives and works in California. He enjoys creating cool new stuff out of CSS3 and HTML5, and is convinced that Jquery is the meaning of life. He also regularly writes on his blog, DesignLunatic.com.

Seriously? I had no trouble at all with those sites. Seemed pretty obvious to me – you should get out more.

Alexandre Smirnov

Hello Rich,
Just as I said in the tutorial, this type of site isn’t for everyone ;)No worries about the rant, it’s nice when people post what they think about a particular subject.- Alexandre

Jens Caspari

Hey Alexandre, this is a nice one. Unfortunately we have a problem with touch scrolling on the iPad. Maybe you have a solution for the following problem:

On iPad the first touch on the navigation works like charm, but touching the next link won´t work. Now if I scroll down or up for a pixel or more the scrolling effect works again.

Doe you have an idea?

Thanks in advance,
Jens

Ljerny

I was wondering the same thing. I have looked at a number of examples using the scrollTo plugin and they all work the same way on an iPad or iPhone. I’m not sure how it works on an android tablet but I have not been able to get an answer yet. Does anyone have a solution?

Thanks

Lee

Skrdkn

Very Nice

Srinivas

Very helpful article for the serious issue. Thanks a lot.

Benjamin

Same problem here !!! any solution ? thanks

whatever

Great clean tutorial thanks!

I would like to use this effect inside a static div in my content rather than as a single page. In other words, i’d like to include this inside an existing page and have the nav hold position while content is in a div that scrolls. Other content on the page unaffected. ANy ideas?

hans_landa

Thanks! Was able to implement it in one of my projects. The tutorial is great but just for your info..the source and demo link did not work for me!

I now see that its not necessary to have anything for home button because its a one page design. As for the other links I want to see how to show Bio,portfolio,contact for search engines.I do have ID’s on my bio,portfolio, contact, and the home. I don’t know if I am asking the right questions here. I am still new to web. I am also thank I may not need to show the urls since this is fact a one page site; just with go to links(smooth Scrolling). Thanks for the smooth scrolling script.