teratail
回答率
85.30%
質問するログイン新規登録
トップに関する質問タブをクリックすると上部にスクロールされてしまう

編集履歴

質問編集履歴

12

編集

2017/02/09 04:58

投稿

kita
kita

スコア12

title CHANGED
File without changes
body CHANGED
File without changes

11

更新

2017/02/09 04:58

投稿

kita
kita

スコア12

title CHANGED
File without changes
body CHANGED
@@ -100,7 +100,9 @@
100
100
 
101
101
  **＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝追加＝＝＝＝＝＝＝**
102
102
 
103
- **a要素でクリックせずに～**を試しましたが、タブは固定されましたが、タブ下の内容が非表示になりました。。。
103
+ **a要素でクリックせずに～**を試しました
104
+ **解決できましたー(^^)/**
105
+
104
106
  ```ここに言語を入力
105
107
  $(function(){
106
108
  $('#tabcontents div[id != "tab01"]').hide();

10

修正

2017/02/08 08:27

投稿

kita
kita

スコア12

title CHANGED
File without changes
body CHANGED
@@ -106,7 +106,7 @@
106
106
  $('#tabcontents div[id != "tab01"]').hide();
107
107
  $( 'span[data-href]' ).on( 'click', function() {
108
108
  $("#tabcontents div").hide();
109
- $( $( this ).data( 'data-href') ).show();
109
+ $( $( this ).data( 'href') ).show();
110
110
  $(".current").removeClass("current");
111
111
  $(this).addClass("current");
112
112
  return false;

9

編集

2017/02/08 08:24

投稿

kita
kita

スコア12

title CHANGED
File without changes
body CHANGED
@@ -99,6 +99,7 @@
99
99
 
100
100
 
101
101
  **＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝追加＝＝＝＝＝＝＝**
102
+
102
103
  **a要素でクリックせずに～**を試しましたが、タブは固定されましたが、タブ下の内容が非表示になりました。。。
103
104
  ```ここに言語を入力
104
105
  $(function(){

8

追加

2017/02/08 08:14

投稿

kita
kita

スコア12

title CHANGED
File without changes
body CHANGED
@@ -94,4 +94,59 @@
94
94
  ```
95
95
 
96
96
  ちなみに、<ul class="tab">としたら、タブのスクロールは解決しましたが、
97
- タブ下の表示部分が崩れました( ﾉД`)ｼｸｼｸ…
97
+ タブ下の表示部分が崩れました( ﾉД`)ｼｸｼｸ…
98
+
99
+
100
+
101
+ **＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝追加＝＝＝＝＝＝＝**
102
+ **a要素でクリックせずに～**を試しましたが、タブは固定されましたが、タブ下の内容が非表示になりました。。。
103
+ ```ここに言語を入力
104
+ $(function(){
105
+ $('#tabcontents div[id != "tab01"]').hide();
106
+ $( 'span[data-href]' ).on( 'click', function() {
107
+ $("#tabcontents div").hide();
108
+ $( $( this ).data( 'data-href') ).show();
109
+ $(".current").removeClass("current");
110
+ $(this).addClass("current");
111
+ return false;
112
+ });
113
+ });
114
+ ```
115
+
116
+ ```ここに言語を入力
117
+ <section id="tabindex">
118
+
119
+ <ul>
120
+ <li><span data-href="#tab01" class="current">color</span></li>
121
+ <li><span data-href="#tab02" class="">size</span></li>
122
+ <li><span data-href="#tab03" class="">Material</span></li>
123
+ <li><span data-href="#tab04" class="">Country</span></li>
124
+ <li><span data-href="#tab05" class="">aa</span></li>
125
+ </ul>
126
+
127
+ <div id="tabcontents">
128
+ <div id="tab01">
129
+ <p>
130
+ <strong>Blue/Red/White</strong></p>
131
+ <p></p>
132
+ </div>
133
+ <div id="tab02">
134
+ <p><strong>36・38・40</strong></p>
135
+ <p></p>
136
+ </div>
137
+ <div id="tab03">
138
+ <p><strong>cotton 100%</strong></p>
139
+ <p></p>
140
+ </div>
141
+ <div id="tab04">
142
+ <p><strong>Japan</strong></p>
143
+ <p></p>
144
+ </div>
145
+ <div id="tab05">
146
+ <p><strong>aaa</strong></p>
147
+ <p></p>
148
+ </div>
149
+ </div>
150
+
151
+ </section>
152
+ ```

7

編集

2017/02/08 08:11

投稿

kita
kita

スコア12

title CHANGED
File without changes
body CHANGED
@@ -7,14 +7,9 @@
7
7
  タブをクリックすればするほど少しずつ上部に移動し、
8
8
  最終的には一番上に…
9
9
 
10
- ネットで色々調べ、スクロールのJSとバッティングしているとかの記事を見つけ、
11
- $("a" + "a:not(.non-scroll)")や
12
- $("a[href^=#]:not(.non-scroll)")
10
+ 何かいい解決方法教えいただけませんでしょうか？<(_ _)>
13
- としてみたのですが、うまくいきません( ﾉД`)ｼｸｼｸ…
14
11
 
15
- 何かいい方法教えいただけませんでしょうか？<(_ _)>
16
12
 
17
-
18
13
  ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
19
14
  (追加)
20
15
  すみません。少し原因が分かってきました。

6

修正

2017/02/08 06:15

投稿

kita
kita

スコア12

title CHANGED
File without changes
body CHANGED
@@ -1,4 +1,4 @@
1
- はじめまして。JQ初心者です。
1
+ はじめまして。jQuery初心者です。
2
2
  http://www.aiship.jp/knowhow/archives/28160
3
3
 
4
4
  上記サイトのタグを拝借し、いい感じのところまでいっております。

5

修正

2017/02/08 06:14

投稿

kita
kita

スコア12

title CHANGED
File without changes
body CHANGED
@@ -74,7 +74,7 @@
74
74
  <div id="tabcontents">
75
75
  <div id="tab01">
76
76
  <p>
77
- <img src="../../../Content/img/content/english/mail/point01_pc.png" alt=""/> <strong>Blue/Red/White</strong></p>
77
+ <strong>Blue/Red/White</strong></p>
78
78
  <p></p>
79
79
  </div>
80
80
  <div id="tab02">

4

htmlの追加

2017/02/08 06:13

投稿

kita
kita

スコア12

title CHANGED
File without changes
body CHANGED
@@ -19,8 +19,8 @@
19
19
  (追加)
20
20
  すみません。少し原因が分かってきました。
21
21
 
22
- common.jsファイル
22
+ **common.js**ファイル
23
- －－－－－－－－－－－－－－－
23
+
24
24
  ```ここに言語を入力
25
25
  // smooth scroll
26
26
  $(function(){
@@ -34,7 +34,7 @@
34
34
  });
35
35
  });
36
36
  ```
37
- －－－－－－－－－－－－－－－
37
+
38
38
  という記載があり、どうやらこれが影響しているようです。
39
39
  $('a[href^=#]').not('#header a,.tab li a,').click(function(){
40
40
  を、
@@ -43,8 +43,8 @@
43
43
  このcommon.jsファイル事態を触ることが禁止されています。
44
44
 
45
45
 
46
- 出来れば、test.jsファイル(以下、記載)内で解決したく、
46
+ 出来れば、**test.js**ファイル(以下、記載)内で解決したく、
47
- －－－－－－－－－－－－－－－
47
+
48
48
  ```ここに言語を入力
49
49
  $(function(){
50
50
  $('#tabcontents div[id != "tab01"]').hide();
@@ -57,5 +57,46 @@
57
57
  });
58
58
  });
59
59
  ```
60
- －－－－－－－－－－－－－－－
60
+
61
- 上記記載内で解決できませんでしょうか？
61
+ 上記記載内で解決できませんでしょうか？
62
+
63
+ htmlも念のため記載しておきます
64
+ ```ここに言語を入力
65
+ <section id="tabindex">
66
+ <ul>
67
+ <li><a href="#tab01" class="current">color</a></li>
68
+ <li><a href="#tab02" class="">size</a></li>
69
+ <li><a href="#tab03" class="">Material</a></li>
70
+ <li><a href="#tab04" class="">Country</a></li>
71
+ <li><a href="#tab05" class="">aa</a></li>
72
+ </ul>
73
+
74
+ <div id="tabcontents">
75
+ <div id="tab01">
76
+ <p>
77
+ <img src="../../../Content/img/content/english/mail/point01_pc.png" alt=""/> <strong>Blue/Red/White</strong></p>
78
+ <p></p>
79
+ </div>
80
+ <div id="tab02">
81
+ <p><strong>36・38・40</strong></p>
82
+ <p></p>
83
+ </div>
84
+ <div id="tab03">
85
+ <p><strong>cotton 100%</strong></p>
86
+ <p></p>
87
+ </div>
88
+ <div id="tab04">
89
+ <p><strong>Japan</strong></p>
90
+ <p></p>
91
+ </div>
92
+ <div id="tab05">
93
+ <p><strong>aaa</strong></p>
94
+ <p></p>
95
+ </div>
96
+ </div>
97
+
98
+ </section>
99
+ ```
100
+
101
+ ちなみに、<ul class="tab">としたら、タブのスクロールは解決しましたが、
102
+ タブ下の表示部分が崩れました( ﾉД`)ｼｸｼｸ…

3

コードの表記修正

2017/02/08 06:12

投稿

kita
kita

スコア12

title CHANGED
File without changes
body CHANGED
@@ -21,6 +21,7 @@
21
21
 
22
22
  common.jsファイル
23
23
  －－－－－－－－－－－－－－－
24
+ ```ここに言語を入力
24
25
  // smooth scroll
25
26
  $(function(){
26
27
  $('a[href^=#]').not('#header a,.tab li a,').click(function(){
@@ -32,6 +33,7 @@
32
33
  return false;
33
34
  });
34
35
  });
36
+ ```
35
37
  －－－－－－－－－－－－－－－
36
38
  という記載があり、どうやらこれが影響しているようです。
37
39
  $('a[href^=#]').not('#header a,.tab li a,').click(function(){
@@ -43,6 +45,7 @@
43
45
 
44
46
  出来れば、test.jsファイル(以下、記載)内で解決したく、
45
47
  －－－－－－－－－－－－－－－
48
+ ```ここに言語を入力
46
49
  $(function(){
47
50
  $('#tabcontents div[id != "tab01"]').hide();
48
51
  $("a").click(function(){
@@ -53,5 +56,6 @@
53
56
  return false;
54
57
  });
55
58
  });
59
+ ```
56
60
  －－－－－－－－－－－－－－－
57
61
  上記記載内で解決できませんでしょうか？

2

タグ修正

2017/02/08 05:42

投稿

kita
kita

スコア12

title CHANGED
File without changes
body CHANGED
@@ -23,7 +23,7 @@
23
23
  －－－－－－－－－－－－－－－
24
24
  // smooth scroll
25
25
  $(function(){
26
- $('a[href^=#]').not('#header a,.tab li a,#tabindex li a').click(function(){
26
+ $('a[href^=#]').not('#header a,.tab li a,').click(function(){
27
27
  var speed = 500;
28
28
  var href= $(this).attr("href");
29
29
  var target = $(href == "#" || href == "" ? 'html' : href);
@@ -34,7 +34,7 @@
34
34
  });
35
35
  －－－－－－－－－－－－－－－
36
36
  という記載があり、どうやらこれが影響しているようです。
37
- $('a[href^=#]').not('#header a,.tab li a,#tabindex li a').click(function(){
37
+ $('a[href^=#]').not('#header a,.tab li a,').click(function(){
38
38
  を、
39
39
  $('a[href^=#]').not('#header a,.tab li a,#tabindex li a').click(function(){
40
40
  と書き換えれば、問題は解決するのですが、

1

タグの追加

2017/02/08 05:41

投稿

kita
kita

スコア12

title CHANGED
File without changes
body CHANGED
@@ -12,4 +12,46 @@
12
12
  $("a[href^=#]:not(.non-scroll)")
13
13
  としてみたのですが、うまくいきません( ﾉД`)ｼｸｼｸ…
14
14
 
15
- 何かいい方法教えいただけませんでしょうか？<(_ _)>
15
+ 何かいい方法教えいただけませんでしょうか？<(_ _)>
16
+
17
+
18
+ ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
19
+ (追加)
20
+ すみません。少し原因が分かってきました。
21
+
22
+ common.jsファイル
23
+ －－－－－－－－－－－－－－－
24
+ // smooth scroll
25
+ $(function(){
26
+ $('a[href^=#]').not('#header a,.tab li a,#tabindex li a').click(function(){
27
+ var speed = 500;
28
+ var href= $(this).attr("href");
29
+ var target = $(href == "#" || href == "" ? 'html' : href);
30
+ var position = target.offset().top - 100;
31
+ $("html, body").animate({scrollTop:position}, speed, "swing");
32
+ return false;
33
+ });
34
+ });
35
+ －－－－－－－－－－－－－－－
36
+ という記載があり、どうやらこれが影響しているようです。
37
+ $('a[href^=#]').not('#header a,.tab li a,#tabindex li a').click(function(){
38
+ を、
39
+ $('a[href^=#]').not('#header a,.tab li a,#tabindex li a').click(function(){
40
+ と書き換えれば、問題は解決するのですが、
41
+ このcommon.jsファイル事態を触ることが禁止されています。
42
+
43
+
44
+ 出来れば、test.jsファイル(以下、記載)内で解決したく、
45
+ －－－－－－－－－－－－－－－
46
+ $(function(){
47
+ $('#tabcontents div[id != "tab01"]').hide();
48
+ $("a").click(function(){
49
+ $("#tabcontents div").hide();
50
+ $($(this).attr("href")).show();
51
+ $(".current").removeClass("current");
52
+ $(this).addClass("current");
53
+ return false;
54
+ });
55
+ });
56
+ －－－－－－－－－－－－－－－
57
+ 上記記載内で解決できませんでしょうか？