Skip to content

Instantly share code, notes, and snippets.

@justincarroll

justincarroll/jquery-smooth-scroll-no-plugin.htm

Last active December 17, 2015 09:19
Show Gist options
  • Save justincarroll/5586118 to your computer and use it in GitHub Desktop.
Save justincarroll/5586118 to your computer and use it in GitHub Desktop.
Download ZIP
Bloated smooth-scroll jQuery plugins beware! jQuery has the inherent ability to smooth-scroll the page to a certain location with one line of code. The more you know...
Raw
jquery-smooth-scroll-no-plugin.htm
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>jQuery Smooth Scroll Without a Plugin</title>
<style>p { height: 3000px; }</style>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="script.js"></script>
</head>
<body>
<p><a id="scrollfrom" href="#">Click this to scroll!</a></p>
<h1 id="scrollto">Goodbye, world!</h1>
</body>
</html>
Raw
script.js
$(document).ready( function() {
// Dynamically gets the scrollTop() value of an element and animates there
$( '#scrollfrom' ).click( function() {
$( 'body, html' ).animate( { scrollTop: jQuery( '#scrollto' ).offset().top }, 'slow' );
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment