[jQuery] Smooth scrolling navigation

Hey! I want to show you very simple, yet effective way to navigate through your page. If you are using one-page-template where navigation leads to another #handler it would be really cool if user will be smoothly scrolled down to the proper handler. “How can I do it?” you ask? Simple :slight_smile:

$(document).ready(function () {	
	$('a[href^="#"]').on('click',function (e) {
		e.preventDefault();
		var target = this.hash,
		$target = $(target);
		$('html, body').stop().animate({
			'scrollTop': $target.offset().top
		}, 900, 'swing', function() {
			window.location.hash = target;
		});
	});
});

That line: $('a[href^="#"]').on('click',function (e) { and especiialy the part $('a[href^="#"]') can be changed to whatever selector you wish it to be. This one says that if there is <a href="#whateveryoutypehere"> tag it will scroll down to the <... id="whateveryoutypehere" ...> tag.

I am not the author of this code, I’ve found it somewhere on the internet, but I think you could use it somehow.
~Bartek

4 Likes

Great post @bartekkustra! We’ll be adding this automatically to our pages soon, thanks!

Hey guys, we just released native smooth scrolling for in-page links! If you have links to sections in your site, all you need to do is re-publish to take advantage of it.

Here are some example pages built with Webflow that use this technique:

Please let us know if you have any feedback :smiley:

3 Likes

Smooth :smiley: Thanks a lot for that feature :wink: I’d love to help you with some image slider. That’d be great to have one here too! Let me know if you need something :slight_smile:

1 Like

I moved 7 posts to a new topic: How do I add a link to an image?

Is there any way to modify this smooth scroll or are we stuck with the default one?

Yeah, after I made some internal links to my website and found out that the generated script uses 900 milliseconds, it’s rather slow for good UX. Is there any option in Webflow to increase the speed? Anywhere between 200-500 looks professional. Everything more than that enter into the “fancy” category.

2 Likes

Thanks @bartekkustra, I’ll try this as soon as I get a chance.

1 Like

Hey! Is this feature deprecated? It doesn’t appear to be working smoothly (at least not in the first link).

Hey @ctraver2,

Apologise for late reply…

This code was created and meant to be used in the early stages of Webflow, back in summer 2013. Soon after that Webflow has implemented this as a standard feature. All you have to do is to add a unique ID to a section and you can link your navigation to the specific section.

Please look at the following article: http://help.webflow.com/faq/how-to-make-a-link-scroll-to-a-section-of-a-webpage that should help :)

Cleanup of old abandoned threads.