Skip to content

Instantly share code, notes, and snippets.

@tamurashingo

tamurashingo/jquery_and_mdl.html

Created August 16, 2015 13:51
Show Gist options
  • Save tamurashingo/e9969909c9bc5ad8d844 to your computer and use it in GitHub Desktop.
Save tamurashingo/e9969909c9bc5ad8d844 to your computer and use it in GitHub Desktop.
Download ZIP
jquery scroll test
Raw
jquery_and_mdl.html
<html>
<head>
</head>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.2/material.indigo-pink.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<body>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Home</a>
<a class="mdl-navigation__link smooth" href="#product">Product</a>
</nav>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<!--Main contents -->
<main class="mdl-layout__content">
<div id="product">Contents</div>
</main>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.2/material.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script>
$(function(){
$('a.smooth').click(function(){
console.log("SMOOTH BEGIN");
var speed = 1000;
var href= $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top;
$("html, body").animate({scrollTop:position}, speed, "swing");
console.log("SMOOTH END");
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment