sgw sgw

Fラン大卒の海外就職

英語、カナダ生活、ウェブサイト開発、学校とかいろいろ書いてます
sgw

sgw

2018年にバンクーバーの州立学校BCITを卒業してバンクーバーでコーダー兼デザイン業務みたいな仕事したあと就活兼フリーランスやって今はバンクーバーの制作会社でワードプレス中心のフロントエンドとして働いていますw

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

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

こちらからダウンロード

Github

Demo

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

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

この記事が気にったらいいね!して下さい

SNSでsgwをフォローしよう!

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です