タブ切り替え時のアンカーリンクずれを直したい

<input>と<label>を利用した「タブ切り替え（cssのみ）」を作成し、
その各タブの中に「overflow:scrollエリア内スクロール」を設置したのですが
タブを切り替えるとアンカーリンクの飛び先が大きくずれてしまいます。

参考サイトはこちらの2つです。

・CSSだけでタブ切り替えを作る
https://bagelee.com/design/css/create_tabs_using_only_css/

・overflow:scroll内をスムーズスクロール
http://blog.webcreativepark.net/2015/12/16-054605.html

html
1<!DOCTYPE HTML>
2<html>
3<head>
4<title>test</title>
5<link rel="stylesheet" type="text/css" href="下記cssを参照">
6</head>
7<body>
8
9<!--タブ全体-->
10<div class="tabs">
11
12  <!--タブ切り替えボタン-->
13  <input id="all" type="radio" name="tab_item" checked>
14  <label class="tab_item" for="all">総合</label>
15  <input id="programming" type="radio" name="tab_item">
16  <label class="tab_item" for="programming">プログラミング</label>
17  <input id="design" type="radio" name="tab_item">
18  <label class="tab_item" for="design">デザイン</label>
19  <!--タブ切り替えボタン-->
20
21  <!--タブ単体-->
22  <div class="tab_content" id="all_content">
23    <!--overflow:scroll内スムーズスクロールリンク-->
24    <a href="#aancher01" data-box=".scroll">A1</a>
25    <a href="#aancher10" data-box=".scroll">A10</a>
26    <a href="#aancher20" data-box=".scroll">A20</a>
27    <a href="#aancher30" data-box=".scroll">A30</a>
28    <!--overflow:scroll内スムーズスクロールリンク-->
29
30    <!--overflow:scrollエリア-->
31    <div class="scroll">
32      <p id="aancher01">A1</p>
33      <p id="aancher02">A2</p>
34      <p id="aancher03">A3</p>
35      <p id="aancher04">A4</p>
36      <p id="aancher05">A5</p>
37      <p id="aancher06">A6</p>
38      <p id="aancher07">A7</p>
39      <p id="aancher08">A8</p>
40      <p id="aancher09">A9</p>
41      <p id="aancher10">A10</p>
42      <p id="aancher11">A11</p>
43      <p id="aancher12">A12</p>
44      <p id="aancher13">A13</p>
45      <p id="aancher14">A14</p>
46      <p id="aancher15">A15</p>
47      <p id="aancher16">A16</p>
48      <p id="aancher17">A17</p>
49      <p id="aancher18">A18</p>
50      <p id="aancher19">A19</p>
51      <p id="aancher20">A20</p>
52      <p id="aancher21">A21</p>
53      <p id="aancher22">A22</p>
54      <p id="aancher23">A23</p>
55      <p id="aancher24">A24</p>
56      <p id="aancher25">A25</p>
57      <p id="aancher26">A26</p>
58      <p id="aancher27">A27</p>
59      <p id="aancher28">A28</p>
60      <p id="aancher29">A29</p>
61      <p id="aancher30">A30</p>
62      <p id="aancher31">A31</p>
63      <p id="aancher32">A32</p>
64      <p id="aancher33">A33</p>
65      <p id="aancher34">A34</p>
66      <p id="aancher35">A35</p>
67      <p id="aancher36">A36</p>
68      <p id="aancher37">A37</p>
69      <p id="aancher38">A38</p>
70      <p id="aancher39">A39</p>
71    </div>
72    <!--overflow:scrollエリア-->
73  </div>
74  <!--タブ単体-->
75
76  <!--タブ単体-->
77  <div class="tab_content" id="programming_content">
78    <!--overflow:scroll内スムーズスクロールリンク-->
79    <a href="#bancher01" data-box=".scroll">B1</a>
80    <a href="#bancher10" data-box=".scroll">B10</a>
81    <a href="#bancher20" data-box=".scroll">B20</a>
82    <a href="#bancher30" data-box=".scroll">B30</a>
83    <a href="#bancher40" data-box=".scroll">B40</a>
84    <a href="#bancher50" data-box=".scroll">B50</a>
85    <!--overflow:scroll内スムーズスクロールリンク-->
86
87    <!--overflow:scrollエリア-->
88    <div class="scroll">
89      <p id="bancher01">B1</p>
90      <p id="bancher02">B2</p>
91      <p id="bancher03">B3</p>
92      <p id="bancher04">B4</p>
93      <p id="bancher05">B5</p>
94      <p id="bancher06">B6</p>
95      <p id="bancher07">B7</p>
96      <p id="bancher08">B8</p>
97      <p id="bancher09">B9</p>
98      <p id="bancher10">B10</p>
99      <p id="bancher11">B11</p>
100      <p id="bancher12">B12</p>
101      <p id="bancher13">B13</p>
102      <p id="bancher14">B14</p>
103      <p id="bancher15">B15</p>
104      <p id="bancher16">B16</p>
105      <p id="bancher17">B17</p>
106      <p id="bancher18">B18</p>
107      <p id="bancher19">B19</p>
108      <p id="bancher20">B20</p>
109      <p id="bancher21">B21</p>
110      <p id="bancher22">B22</p>
111      <p id="bancher23">B23</p>
112      <p id="bancher24">B24</p>
113      <p id="bancher25">B25</p>
114      <p id="bancher26">B26</p>
115      <p id="bancher27">B27</p>
116      <p id="bancher28">B28</p>
117      <p id="bancher29">B29</p>
118      <p id="bancher30">B30</p>
119      <p id="bancher31">B31</p>
120      <p id="bancher32">B32</p>
121      <p id="bancher33">B33</p>
122      <p id="bancher34">B34</p>
123      <p id="bancher35">B35</p>
124      <p id="bancher36">B36</p>
125      <p id="bancher37">B37</p>
126      <p id="bancher38">B38</p>
127      <p id="bancher39">B39</p>
128      <p id="bancher40">B40</p>
129      <p id="bancher41">B41</p>
130      <p id="bancher42">B42</p>
131      <p id="bancher43">B43</p>
132      <p id="bancher44">B44</p>
133      <p id="bancher45">B45</p>
134      <p id="bancher46">B46</p>
135      <p id="bancher47">B47</p>
136      <p id="bancher48">B48</p>
137      <p id="bancher49">B49</p>
138      <p id="bancher50">B50</p>
139      <p id="bancher51">B51</p>
140      <p id="bancher52">B52</p>
141      <p id="bancher53">B53</p>
142      <p id="bancher54">B54</p>
143      <p id="bancher55">B55</p>
144      <p id="bancher56">B56</p>
145      <p id="bancher57">B57</p>
146      <p id="bancher58">B58</p>
147      <p id="bancher59">B59</p>
148    </div>
149    <!--overflow:scrollエリア-->
150  </div>
151  <!--タブ単体-->
152
153  <!--タブ単体-->
154  <div class="tab_content" id="design_content">
155    <!--overflow:scroll内スムーズスクロールリンク-->
156    <a href="#cancher01" data-box=".scroll">C1</a>
157    <a href="#cancher10" data-box=".scroll">C10</a>
158    <a href="#cancher20" data-box=".scroll">C20</a>
159    <!--overflow:scroll内スムーズスクロールリンク-->
160
161    <!--overflow:scrollエリア-->
162    <div class="scroll">
163      <p id="cancher01">C1</p>
164      <p id="cancher02">C2</p>
165      <p id="cancher03">C3</p>
166      <p id="cancher04">C4</p>
167      <p id="cancher05">C5</p>
168      <p id="cancher06">C6</p>
169      <p id="cancher07">C7</p>
170      <p id="cancher08">C8</p>
171      <p id="cancher09">C9</p>
172      <p id="cancher10">C10</p>
173      <p id="cancher11">C11</p>
174      <p id="cancher12">C12</p>
175      <p id="cancher13">C13</p>
176      <p id="cancher14">C14</p>
177      <p id="cancher15">C15</p>
178      <p id="cancher16">C16</p>
179      <p id="cancher17">C17</p>
180      <p id="cancher18">C18</p>
181      <p id="cancher19">C19</p>
182      <p id="cancher20">C20</p>
183      <p id="cancher21">C21</p>
184      <p id="cancher22">C22</p>
185      <p id="cancher23">C23</p>
186      <p id="cancher24">C24</p>
187      <p id="cancher25">C25</p>
188      <p id="cancher26">C26</p>
189      <p id="cancher27">C27</p>
190      <p id="cancher28">C28</p>
191      <p id="cancher29">C29</p>
192    </div>
193    <!--overflow:scrollエリア-->
194  </div>
195  <!--タブ単体-->
196
197</div>
198<!--タブ全体-->
199
200<script type="text/javascript" src="jqueryファイルと下記jsファイルを参照"></script>
201
202</div>
203</body>
204</html>

css
1/*タブ切り替え*/
2.tabs {
3  margin-top: 50px;
4  padding-bottom: 40px;
5  background-color: #fff;
6  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
7  width: 700px;
8  margin: 0 auto;}
9.tab_item {
10  width: calc(100%/3);
11  height: 50px;
12  border-bottom: 3px solid #5ab4bd;
13  background-color: #d9d9d9;
14  line-height: 50px;
15  font-size: 16px;
16  text-align: center;
17  color: #565656;
18  display: block;
19  float: left;
20  text-align: center;
21  font-weight: bold;
22  transition: all 0.2s ease;
23}
24.tab_item:hover {
25  opacity: 0.75;
26}
27input[name="tab_item"] {
28  display: none;
29}
30.tab_content {
31  display: none;
32  padding: 40px 40px 0;
33  clear: both;
34  overflow: hidden;
35}
36
37#all:checked ~ #all_content,
38#programming:checked ~ #programming_content,
39#design:checked ~ #design_content {
40  display: block;
41}
42.tabs input:checked + .tab_item {
43  background-color: #5ab4bd;
44  color: #fff;
45}
46
47
48/*スクロール*/
49.scroll{
50  height:300px;
51  overflow:scroll;
52  border:1px solid black;
53  padding:10px;
54}

javascript
1$(function(){
2  $("a[href^='#']").click(function(){
3
4    if($(this).data("box")){
5      var $box = $($(this).data("box"));
6      var $tareget = $($(this).attr("href"));
7      var dist = $tareget.position().top - $box.position().top;
8      $box.stop().animate({
9        scrollTop: $box.scrollTop() + dist
10      });
11    }
12    return false;
13  });
14});

＊上記3点で再現を確認しております。
＊動的なサイトのため、個々の要素の高さを固定できません。
＊各タブ、アンカーリンク飛び先のコンテンツ（<div class="scroll">内）は
量がそれぞれ異なるため、タブを切り替えたタイミングで要素の高さが変わり
スクロールのjsが正しい高さを取得できていないのかもしれません。

タブ切り替え・アンカーリンククリックでの動作は問題なく、
アンカーリンクの飛び位置のみ要素の先頭に来ない状態です。
どう修正すればよいのか、どなたかお教えいただけると大変助かります。

＜追記＞
２番目以降のタブ内のアンカーリンク、同じものを複数回クリックすると
別箇所へスクロールする現象を確認しました。

x_x

2018/03/30 01:06

HTMLに出てこないboxがあったり、CSSがなかったりしていますが、再現するコードを挙げられないでしょうか？

taraoka

2018/03/30 01:50

大変失礼しました、ご指摘頂きありがとうございます。再現を確認したhtml・css・jsファイルに修正いたしました。

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

回答1件

ベストアンサー

$boxが別タブも含んでしまっているので、開いているところに限定してはどうでしょうか？

JavaScript
1      //var $box = $($(this).data("box"));
2      var $box = $(this).closest('.tab_content').find($(this).data("box"));

投稿2018/03/30 02:07

x_x

総合スコア13749

taraoka

2018/03/30 04:38

なるほど、クリックしたアンカーリンクに近いboxにしぼって位置を取得するのですね。問題も解消し、大変勉強になりました。本当にありがとうございます。

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.47%

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

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

質問する

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

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

タブ切り替え時のアンカーリンクずれを直したい

関連した質問