You can go to top and bottom of the page by clicking the arrow icon of the page.
Easy to use, just include one js file.
The DEMO is at the bottom right of this page so you can see if it works on your browser.
Pure JavaScript Library.
Filesize is 2.75KB.(minify)
HTML DOM generation and style are automated.
Also supports internal links.
ページ右下のアイコンをクリックすれば、ページの上にも下にもスムーズにスクロールが出来ます。
使い方は簡単。jsファイルをひとつ読み込むだけ。
デモはこのページの右下にありますので、お使いのブラウザで動作を確認できます。
純JavaScript製。ファイルサイズは 2.75KB(minify版)。HTML DOMの生成とstyleは全て自動化してあります。
ページ内リンクにも対応しています。
You can check the DEMO at the bottom right of this page.
このページの右下で動作確認ができます。
Latest Chrome, Firefox, Safari(*1), Edge(*1)
Androidは動作未確認。
*1:Safari, Edgeでsmooth-scrollを動作させるためには、Scroll-Behavior-polyfill libraryの読込みが必要となります。
MIT License
著作権は放棄しておりませんのでjsファイル内のライセンス情報は、必ず表記したままでお願いします。
<!-- //for Safari and Edge : Scroll-Behavior-polyfill Library -->
<script defer src='https://cdnjs.cloudflare.com/ajax/libs/iamdustan-smoothscroll/0.4.0/smoothscroll.min.js'></script>
<!-- //Basic Usage -->
<script defer src='path/to/lazyScroll.js' id="script_lazyscroll"></script>
OR detail
<!-- //Custom Setting Sample -->
<script defer src='path/to/lazyScroll.js' id="script_lazyscroll" data-color="white" data-border="black" data-bordersize="10" data-size="33"></script>data-color: Icon color,String (default: white)
data-border: Icon border color,String (default: black)
data-bordersize: Icon border width,Numeric (default(px): 10)
data-size: Icon size,Numeric (default(px): 33)
❖ ページ全体を包む要素にoerflowにautoやscrollが設定されている場合や、iframeを使用している場合などは、正しく動作しない可能性があります。
免責事項
❖ ご使用は上に掲載のライセンスに基づいてご使用いただけますが、著作権は当サイト(labs.manohara.info)に帰属します。
❖ このファイルやデータを使用して、使用者やその他の第三者に生じた損害その他不利益については、当サイトは一切の責任を負いません。
❖ 個人的あるいは限定的な環境内での使用方法や設定方法についての質問にはお答え致しかねます。
❖ 当サイトの掲載情報の無断転用を禁じます。
上記の点をご了承の上で使用してください。
DEMO