Skip to content

Latest commit

 

History

History
78 lines (69 loc) · 1.88 KB

README.md

File metadata and controls

78 lines (69 loc) · 1.88 KB
Raw

scroll-link

Polymer component for native smooth scroll behavior.

Based on Scroll Behavior polyfill

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