Skip to content

Instantly share code, notes, and snippets.

@rochabianca

rochabianca/gettingDownWithStyle.html

Created December 17, 2018 12:14
Show Gist options
  • Save rochabianca/15f1e5a0a4a2b418369c773699bc85a1 to your computer and use it in GitHub Desktop.
Save rochabianca/15f1e5a0a4a2b418369c773699bc85a1 to your computer and use it in GitHub Desktop.
Download ZIP
slower and way more cool scroll to an section in the page. It needs jQuery
Raw
gettingDownWithStyle.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<a href="#reference" class="styled-down">Click Me</a>
<!-- Pretend that is a very long scroll here -->
<div id="reference">Wow! You just got here! </div>
</body>
</html>
Raw
gettingDownWithStyle.js
$(document).on("click", ".styled-down", function(e) {
e.preventDefault();
var id = $(this).attr("href"),
menuHeight = $(".menu").innerHeight();
targetOffset = $(id).offset().top;
$("html, body").animate(
{
scrollTop: targetOffset - menuHeight
},
1000
);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment