【jquery】トップへスクロールで戻る際に吸着ナビゲーションが点滅してしまう。

前提・実現したいこと

■使用
・300px以上スクロールすると吸着ナビゲーションが表示される。（アニメーションでフェードイン）
・一番下の「トップへ」のリンクをクリックするとトップへスクロースして戻る。

発生している問題・エラーメッセージ

上記の使用のページを作ったのですが、「トップへ」のリンクを押すと
一番上に戻った時に一瞬吸着ナビゲーションが表示されてしまいます。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5	<meta charset="UTF-8">
6	<meta name="viewport" content="width=device-width, initial-scale=1.0">
7	<meta http-equiv="X-UA-Compatible" content="ie=edge">
8	<title>Document</title>
9
10	<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
11
12	<style media="screen">
13		nav {
14			position: fixed;
15			top: 0;
16			z-index: 100;
17			width: 100%;
18		}
19
20		nav ul {
21			width: 100%;
22			display: table;
23			background: #000;
24		}
25
26		nav ul li {
27			width: 25%;
28			display: table-cell;
29			text-align: center;
30		}
31
32		nav ul li a {
33			color: #fff;
34			display: block;
35			padding: 10px 0;
36		}
37
38		nav ul li a:hover {
39			color: #da9e9e;
40		}
41
42		#hogehoge {
43			margin-top: 100px;
44		}
45
46		#hogehoge p {
47			padding: 100px 0;
48		}
49	</style>
50
51</head>
52
53<body>
54
55	<nav>
56		<ul>
57			<li><a href="#">ほーむ</a></li>
58			<li><a href="#">そこ</a></li>
59			<li><a href="#">こっち</a></li>
60			<li><a href="#">あっち</a></li>
61		</ul>
62	</nav>
63
64	<div id="hogehoge">
65		<p>テストテスト</p>
66		<p>テストテスト</p>
67		<p>テストテスト</p>
68		<p>テストテスト</p>
69		<p>テストテスト</p>
70		<p>テストテスト</p>
71		<p>テストテスト</p>
72		<p>テストテスト</p>
73		<p>テストテスト</p>
74		<p>テストテスト</p>
75		<p>テストテスト</p>
76		<p>テストテスト</p>
77		<p><a href="#" class="goTop">トップへ</a></p>
78	</div>
79
80	<script type="text/javascript">
81		jQuery(function($) {
82			$(window).scroll(function() {
83				if ($(window).scrollTop() > 300) {
84					$('nav').fadeIn('nomale');
85				} else {
86					$('nav').fadeOut('nomale');
87				}
88			});
89			$('.goTop').click(
90				function() {
91					$('html,body').animate({
92						scrollTop: 0
93					}, 'nomale');
94				}
95			);
96		});
97	</script>
98
99</body>
100
101</html>

調べ方が悪いのか、解決方法を見つけることができませんでした。
ご存知の方いらっしゃいましたらご教授願います。

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

回答1件

ベストアンサー

フェードインとフェードアウトが重なって何度も実行されてしまうので、
キューを削除する処理が必要です。

あと、ハッシュが付かないように、e.preventDefault()とreturn falseもつけておいたほうがいいです。

javascript
1			$(window).scroll(function() {
2				if ($(window).scrollTop() > 300) {
3					$('nav').stop(false, false).fadeIn('nomale');
4				} else {
5					$('nav').stop(false, false).fadeOut('nomale');
6				}
7			});
8			$('.goTop').click(function(e) {
9				e.preventDefault();
10
11				$('html,body').animate({
12					scrollTop: 0
13				}, 'normal');
14				
15				return false;
16			});
17

それと、直接的な原因ではないと思いますが、normalの綴りが違っていました…。

投稿2018/02/27 15:23

編集2018/02/27 15:30

kszk311

総合スコア3404

zak

2018/02/27 16:01

ご回答ありがとうございます。 stopメソッドというものがあるのですね。勉強になりました！ >あと、ハッシュが付かないように、e.preventDefault()とreturn falseもつけておいたほうがいいです。質問以外のところでもご指摘ありがとうございます。 preventDefault()でリンクを無効化して return false;でパブリングを無効化しているのですね。いつも動けばいいやでコーディングしてしまっているので、非常に勉強になります。ありがとうございます！ >それと、直接的な原因ではないと思いますが、normalの綴りが違っていました…。まったく気づいておりませんでした。。。ありがとうございます！

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