プログラミング

ソッコーでページ内リンクを作るmoveTo.jsを使ってみた【コピペで動くよ!】

shu

どうもこんにちは。すごく簡単にページ内リンクできるプラグインがあったので紹介します。

こちらからダウンロード

Github

[el url=”https://github.com/hsnaydd/moveTo”]hsnaydd/moveTo: A lightweight scroll animation javascript library without any dependency[/el]

Demo

[el url=”https://hsnaydd.github.io/moveTo/demo/”]Demo | MoveTo.js[/el]

コンパイル無しで使う場合

上記githubからダウンロードしたら、dist/moveTo.min.js読み込んで下コードで使えるようになります。

<script src="moveTo.min.js"></script>
<script src="main.js"></script>
var $headerHeight = $('header').outerHeight()
const moveTo = new MoveTo(
 {
   tolerance: $headerHeight + 25,
   duration: 800
 }
);

const triggers = $('a[href^="#"]');
for (var i = 0; i < triggers.length; i++) {
 moveTo.registerTrigger(triggers[i]);
}

webpackとかでコンパイルしてbabel使ってるときの使い方

npm install moveto
import MoveTo from '../node_modules/moveto/src/moveTo';

ってやるだけでページ内リンクは動くんですが、オプションをつけれないので下記のようにしてページ内リンクをクリックしたときにmoveToが発火するように書きます。

今回めんどくさかったのでヘッダーの高さはjqueryで取得してます(もしVanilla Js)がよかったらその辺書き直しが必要です。

import MoveTo from '../node_modules/moveto/src/moveTo';

var $headerHeight = $('header').outerHeight()
const moveTo = new MoveTo(
 {
   tolerance: $headerHeight + 25,
   duration: 800
 }
);

const triggers = $('a[href^="#"]');

for (var i = 0; i < triggers.length; i++) {
  moveTo.registerTrigger(triggers[i]);
}

HTMLは下みたいな感じ。

<ul>
  <li><a href='#sec1'>Section 1</li>
</ul>

<section id='sec1'>
 内容
</section>

これ使えばすぐにページ内リンク作れますw

それではSee Yaaaaa!!

ABOUT ME
sgw
sgw
フロントエンド
カナダのBCITとか言う短大卒業。その後4年ほどカナダでWEB制作系フロントエンドエンジニアとして働いて、今は東京で働いてるニキの雑記ブログ。カナダ留学、英語、WEB制作、ポイ活などなどを主に記事として書いてます。
記事URLをコピーしました