Anchor links with smooth scroll from page to page

That’s because your code is set to look at every anchor tag on the page and add a click event to scroll to a location inside the page itself. You have no code that looks at window.location.hash when the page loads!

You’ll want to add something to the effect of:

if(window.location.hash) {
	// scroll to the target you want using similar code to your animate targetOffset
}

Inside your $(document).ready() function, but outside your $('a[href*=#]').each() function. Let me know if you need more details. We’ve done this quite a bit on some of our client’s websites.

Something like this… though it’s not tested because I don’t know how you are handling your current hash methods. So it’s more a guess… but hopefully put you in the right direction.

<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
	function filterPath(string) {
		return string
		.replace(/^//,'')
		.replace(/(index|default).[a-zA-Z]{3,4}$/,'')
		.replace(//$/,'');
	}
	var locationPath = filterPath(location.pathname);
	var scrollElem = scrollableElement('html', 'body');

	$('a[href*=#]').each(function() {
		var thisPath = filterPath(this.pathname) || locationPath;
		if (locationPath == thisPath && (location.hostname == this.hostname || !this.hostname) && this.hash.replace(/#/,'') ) {
			var $target = $(this.hash), target = this.hash;
			if (target) {
				var targetOffset = $target.offset().top;
				$(this).click(function(event) {
					event.preventDefault();
					$(scrollElem).animate({scrollTop: targetOffset}, 400, function() {
						location.hash = target;
					});
				});
			}
		}
	});

	// Check the current URL on page load to see if a hash was passed
	if ( window.location.hash ) {
		var targetOffset = $('a[href*=' + window.location.hash + ']').offset().top;
		$(scrollElem).animate({scrollTop: targetOffset}, 400);
	}
}
// ]]></script>

By the way, if you aren’t the best at JavaScript, how did you get your code? If it were pulled off a website, can we see that link to better assist?

I know this is resolved, but I want to add this worked for me! I tired using various plugins but they didnt work when jumping from a different page. THIS method works great, and all I need to do now is customize the scroll effect/animation more to my liking. Thanks for posting this.