Q&A
前提・実現したいこと
閲覧いただきありがとうございます。
下記ライブラリを適用させてサイトを作っているのですが、リンクをクリックする度にローダーも起動していまいます。
・smooth-scroll.js（スムーズスクロール）git-hub URL
・pace.js（ローダー）git-hub URL
ローダーはサイトに訪問した時のみの起動にし、スムーズスクロールリンクをクリックしてもローダーが起動しないようにする方法はありますでしょうか？
色々と調べてみましたが自分の力では解決方法を見つけられなかった為、質問させていただきます。
ご教授いただけるとありがたいです。
よろしくお願いいたします。
補足情報
使用ブラウザ：Chrome
使用エディタ：Visual Studio Code
該当のソースコード
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 8 <script src="pace.min.js"></script> 9</head> 10<body> 11 12 <div id="container"> 13 <a data-scroll id="top" href="#scroll1">scroll1へ</a> 14 <div id="scroll1">scroll1</div> 15 <a data-scroll href="#scroll2">scroll2へ</a> 16 <div id="scroll2">scroll2</div> 17 <a data-scroll href="#scroll3">scroll3へ</a> 18 <div id="scroll3">scroll3</div> 19 <a data-scroll href="#top">TOPへ</a> 20 </div> 21 22 <script src="smooth-scroll.min.js"></script> 23</body> 24</html>
css
1a { 2 display: block; 3 margin-bottom: 1000px; 4 font-size: 20px; 5} 6div { 7 font-size: 20px; 8} 9 10/* ローダー適用css */ 11.pace-done #container { 12 opacity: 1; 13} 14#container { 15 opacity: 0; 16 } 17.pace { 18 z-index: 2000; 19 position: fixed; 20 margin: auto; 21 top: 0px; 22 left: 0; 23 right: 0; 24 bottom: 0; 25 width: 100px; 26 height: 100px; 27} 28.pace .pace-progress { 29 transform: none !important; 30 text-align: center; 31} 32.pace .pace-progress::after { 33 content: attr(data-progress-text); 34 display: block; 35 font-size: 1.8rem; 36 font-family: 'Yu Gothic', sans-serif; 37 color: #333; 38 margin-top: 8px; 39} 40.pace.pace-inactive { 41 display: none; 42} 43.pace-progress-inner { 44 width: 40px; 45 height: 40px; 46 background-color: #333; 47 animation: sk-rotate 1.4s infinite; 48 margin: 0 auto; 49} 50@keyframes sk-rotate { 51 0% { 52 transform: perspective(120px) rotateX(0deg) rotateY(0deg); 53 } 54 50% { 55 transform: perspective(120px) rotateX(-180deg) rotateY(0deg); 56 } 57 100% { 58 transform: perspective(120px) rotateX(-180deg) rotateY(-180deg); 59 } 60}
Javascript
1 var scroll = new SmoothScroll('a[href*="#"]');
回答1件
0
ベストアンサー
試してみました。
paceのGiitHubのRestart Rulesの項目に書かれている設定をするといいようです。
html
1 <script> 2 paceOptions = { 3 restartOnPushState: false, 4 }; 5 </script> 6 <script src="pace.min.js"></script>
投稿2020/12/09 00:07
総合スコア204
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/12/09 05:53