ローカル開発環境でワードプレスオリジナルデザインを開発しよう4コード編【HTML, CSS, JavaScript, PHP, WordPress初心者】
shu sgw.today
どうもこんにちは。すごく簡単にページ内リンクできるプラグインがあったので紹介します。
目次
[el url=”https://github.com/hsnaydd/moveTo”]hsnaydd/moveTo: A lightweight scroll animation javascript library without any dependency[/el]
[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]);
}
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!!