Polymer component for native smooth scroll behavior.
Based on Scroll Behavior polyfill
Install with bower:
bower install scroll-link
<!doctype html>
<html>
<head>
<title>My Polymer App</title>
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="bower_components/scroll-link/scroll-link.html">
</head>
<body>
<scroll-link href="#about" title="link title">About section</scroll-link>
...
<section id="about">
some content
</section>
</body>
</html><!doctype html>
<html>
<head>
<title>My Polymer App</title>
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="bower_components/scroll-link/scroll-link.html">
</head>
<body>
<scroll-link top="200" left="50" title="link title">Scroll to position top: 200px, left: 50px</scroll-link>
</body>
</html>- href="selector" - scroll to html selector (document.querySelector). Prefer then "top"/"left";
- top="Number" - scroll to top position
- left="Number" - scroll to top position
Free for changes!
--scroll-link-display: block; /* chage display scroll-link host component*/Example:
scroll-link {
backgroud:red;
margin: 10px;
color: blue;
}
scroll-link > a {
text-decoration: none;
font: 17px/1 'Helvetica', sans-serif;
}- Scroll from Right/Bottom, ScrollBy
- Demo
- Add to Polymer Catalog
- Tests