スムーズスクロールするリンクをクリックするたびにローダーが起動していまいます

前提・実現したいこと

閲覧いただきありがとうございます。

下記ライブラリを適用させてサイトを作っているのですが、リンクをクリックする度にローダーも起動していまいます。

・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件

ベストアンサー

試してみました。
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

gasbombe

総合スコア204

strrr

2020/12/09 05:53

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！