jQuery Smooth Scroll to Anchor

princebazawule.com scroll to anchor

View Demo

We all know that jQuery is a brilliant Javascript library, which can be used to add interactivity to our web pages.

One such interactivity is smoothly scrolling to the appropriate section of your page on clicking a link… Smoooov, right?

The following jQuery snippet can be used to achieves this:

 

What is happening here?

a[href*="#"]:not([href="#"]) targets all anchors.

On click, it checks that the link is pointing to same page and same domain: (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname).

Remainder of the script sets up the target, then uses scrollTop(); and animate(); to smoothly scroll the web page to that section.

Hopefully this is helpful… Do not hesitate to post any improvements.

 

JSFiddle Demo

Absolutely Center Element within Parent with CSS Transform


Fatal error: Uncaught Error: Call to a member function id() on array in /nfs/c03/h02/mnt/51602/domains/princebazawule.com/html/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php:36 Stack trace: #0 /nfs/c03/h02/mnt/51602/domains/princebazawule.com/html/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php(538): CrayonFormatter::format_code('', Array, Object(CrayonHighlighter)) #1 [internal function]: CrayonFormatter::delim_to_internal(Array) #2 /nfs/c03/h02/mnt/51602/domains/princebazawule.com/html/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php(516): preg_replace_callback('#()#msi', 'CrayonFormatter...', '/* element to b...') #3 /nfs/c03/h02/mnt/51602/domains/princebazawule.com/html/wp-content/plugins/crayon-syntax-highlighter/crayon_highlighter.class.php(166): CrayonFormatter::format_mixed_code('/* element to b...', Object(CrayonLang), Object(CrayonHighlighter)) #4 /nfs/c03/h02/mnt/51602/domains/princebazawule.com/html/wp-content/plugins/crayon-syntax-highlig in /nfs/c03/h02/mnt/51602/domains/princebazawule.com/html/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 36