scroll-link " class="reference-link"> scroll-link

Polymer component for native smooth scroll behavior.

Install

Install with bower:

bower install scroll-link

Usage

Scroll to page element

<!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>

Scroll to position

<!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>

Attribute properties

href=”selector” - scroll to html selector (document.querySelector). Prefer then “top”/“left”;
top=”Number” - scroll to top position
left=”Number” - scroll to top position

Styling

Free for changes!

CSS Custom Properties

    --scroll-link-display: block; /* chage display scroll-link host component*/

CSS component customization

Example:

scroll-link {
    backgroud:red;
    margin: 10px;
    color: blue;
}
scroll-link > a {
    text-decoration: none;
    font: 17px/1 'Helvetica', sans-serif;
}

Roadmap

Scroll from Right/Bottom, ScrollBy
Demo
Add to Polymer Catalog
Tests