Set anchor links to smoothly scroll down your page

When setting up an Anchor link within your page, you may want your page to scroll to your anchor point, instead of jumping there directly.

To do this, first follow the directions on the Linking walkthrough to set up your Anchors.

Next, open the PageCloud page with the Anchors you would like to have smooth scroll applied to, and deselect all objects by clicking ESC.

Then, open the Java Script panel by clicking the J then S keys. You should see the first line of code read:

If these two lines of code are not there, Copy the two lines of code and paste them in now.

$(document).ready(function()
{

Next, copy the code below and paste it to line 3.

$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
|| location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});


Once pasted, the Java Script menu should look just like the screen shot below:

If you already have some code in the Javascript editor, you can add this code at the very end (after all the existing code in there already):

$(document).ready(function()
{
    $('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
|| location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});


and it will look something like this

Click Save & Close for the JavaScript menu,  then hit Save and View Live to see your smooth scroll in action


Thank you for your feedback!

Was this article helpful?
Thank you for your feedback!