Snippets

Rik Kendell Smooth Scroll

Created by Rik Kendell
<div>
    <header id="top">
        <h1>The Page</h1>
        <a href="#bottom" title="Scroll to bottom">Scroll to bottom</a>
    </header>
    
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla est quam, cursus non varius vitae, iaculis vitae justo. In sagittis odio ex, in egestas erat feugiat quis. Cras interdum felis eu nulla ultricies rutrum. Quisque aliquet augue et risus rhoncus tincidunt. Ut fermentum, risus quis scelerisque mollis, risus ex bibendum mi, id pulvinar ante mi in diam. Suspendisse varius sit amet quam tempor viverra. Aenean maximus lobortis eros, nec tincidunt purus accumsan et. Pellentesque maximus metus varius ipsum posuere finibus. Aenean rhoncus et ligula sit amet dignissim.<p>
    
    <p>Fusce fermentum elit non ligula convallis mollis. Cras enim augue, facilisis at ultricies a, ullamcorper sed ex. Sed rhoncus scelerisque condimentum. Vestibulum at felis orci. Mauris eu scelerisque erat. Maecenas magna lectus, pellentesque a finibus vitae, vehicula sit amet ligula. Morbi eu lorem eget elit venenatis convallis in non libero. Fusce non placerat lorem. Nam eu augue tellus.</p>
    
    <p>Duis et varius odio. Duis volutpat eros ut sem fermentum, vitae lacinia purus dignissim. Sed ac odio lorem. Nam vitae sagittis nibh, vel dignissim augue. Vivamus sed nibh quis nisi dapibus fermentum. Sed tincidunt vestibulum libero condimentum tincidunt. Nulla semper, turpis vel pulvinar laoreet, lectus diam luctus ante, quis volutpat dolor tortor vel nisl. Etiam eu erat sit amet nisi hendrerit efficitur aliquet lacinia ex. Nunc urna tortor, cursus vel risus ac, varius ultrices tellus.</p>
    
    <footer id="bottom">
        <p>Bottom of the page</p>
    
        <a href="#top" title="Scroll to top">Scroll to top</a>
    </footer>
    
</div>
// Smooth Scroll 
	$(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); // Scroll Speed
		        	return false;
		      	}
		    }
	  	});
	});

Comments (0)

HTTPS SSH

You can clone a snippet to your computer for local editing. Learn more.