質問編集履歴
3
html修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
</div>
|
|
34
34
|
```
|
|
35
35
|
```testhtml
|
|
36
|
-
<p
|
|
36
|
+
<p class="page-15-p">ダミーテキスト</p>
|
|
37
37
|
<!--タブ-->
|
|
38
38
|
<ul class="tab-group" id="group-top">
|
|
39
39
|
<li id="tab1" class="tab is-active">テスト１</li>
|
2
jsの修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -95,9 +95,11 @@
|
|
|
95
95
|
}
|
|
96
96
|
```
|
|
97
97
|
```js
|
|
98
|
-
<script type="text/javascript">
|
|
98
|
+
<script type="text/javascript">
|
|
99
99
|
//タブ操作
|
|
100
100
|
jQuery(function($){
|
|
101
|
+
var target = $('.page-15-p');
|
|
102
|
+
var position = target.offset().top;
|
|
101
103
|
$('.tab').click(function(){
|
|
102
104
|
$('.is-active').removeClass('is-active');
|
|
103
105
|
$(this).addClass('is-active');
|
|
@@ -107,10 +109,52 @@
|
|
|
107
109
|
// クリックしたタブと同じインデックス番号をもつコンテンツを表示
|
|
108
110
|
$('.panel').eq(index).addClass('is-show');
|
|
109
111
|
});
|
|
112
|
+
$('.tab1').click(function(){
|
|
113
|
+
$('.is-active').removeClass('is-active');
|
|
114
|
+
$('#tab1').addClass('is-active');
|
|
115
|
+
$('#tab1').addClass('is-show');
|
|
116
|
+
$('body,html').stop().animate({scrollTop:position}, 500);
|
|
117
|
+
});
|
|
118
|
+
$('.tab2').click(function(){
|
|
119
|
+
$('.is-active').removeClass('is-active');
|
|
120
|
+
$('#tab2').addClass('is-active');
|
|
121
|
+
$('#tab2').addClass('is-show');
|
|
122
|
+
$('body,html').stop().animate({scrollTop:position}, 500);
|
|
123
|
+
});
|
|
124
|
+
$('.tab3').click(function(){
|
|
125
|
+
$('.is-active').removeClass('is-active');
|
|
126
|
+
$('#tab3').addClass('is-active');
|
|
127
|
+
$('#tab3').addClass('is-show');
|
|
128
|
+
$('body,html').stop().animate({scrollTop:position}, 500);
|
|
129
|
+
});
|
|
130
|
+
$('.tab4').click(function(){
|
|
131
|
+
$('.is-active').removeClass('is-active');
|
|
132
|
+
$('#tab4').addClass('is-active');
|
|
133
|
+
$('#tab4').addClass('is-show');
|
|
134
|
+
$('body,html').stop().animate({scrollTop:position}, 500);
|
|
135
|
+
});
|
|
136
|
+
$('.tab5').click(function(){
|
|
137
|
+
$('.is-active').removeClass('is-active');
|
|
138
|
+
$('#tab5').addClass('is-active');
|
|
139
|
+
$('#tab5').addClass('is-show');
|
|
140
|
+
$('body,html').stop().animate({scrollTop:position}, 500);
|
|
141
|
+
});
|
|
142
|
+
$('.tab6').click(function(){
|
|
143
|
+
$('.is-active').removeClass('is-active');
|
|
144
|
+
$('#tab6').addClass('is-active');
|
|
145
|
+
$('#tab6').addClass('is-show');
|
|
146
|
+
$('body,html').stop().animate({scrollTop:position}, 500);
|
|
147
|
+
});
|
|
148
|
+
$('.tab7').click(function(){
|
|
149
|
+
$('.is-active').removeClass('is-active');
|
|
150
|
+
$('#tab7').addClass('is-active');
|
|
151
|
+
$('#tab7').addClass('is-show');
|
|
152
|
+
$('body,html').stop().animate({scrollTop:position}, 500);
|
|
153
|
+
return false;
|
|
154
|
+
});
|
|
110
155
|
});
|
|
111
156
|
</script>
|
|
112
|
-
|
|
113
|
-
<script type="text/javascript">
|
|
157
|
+
<script type="text/javascript">
|
|
114
158
|
//タブ内から別タブへのページ内リンク
|
|
115
159
|
jQuery(function($){
|
|
116
160
|
$('.anchor').click(function(){
|
|
@@ -118,11 +162,14 @@
|
|
|
118
162
|
$('.tab:nth-child(3)').addClass('is-active');
|
|
119
163
|
$('.is-show').removeClass('is-show');
|
|
120
164
|
$('.panel:nth-child(3)').addClass('is-show');
|
|
165
|
+
var target = $('#page-link1');
|
|
166
|
+
var position = target.offset().top;
|
|
167
|
+
$('body,html').stop().animate({scrollTop:position}, 500);
|
|
168
|
+
return false;
|
|
121
169
|
});
|
|
122
170
|
});
|
|
123
171
|
</script>
|
|
124
|
-
|
|
125
|
-
<script>
|
|
172
|
+
<script>
|
|
126
173
|
// タブへのダイレクトリンク
|
|
127
174
|
jQuery(function($){
|
|
128
175
|
$(function() {
|
|
@@ -148,4 +195,51 @@
|
|
|
148
195
|
} );
|
|
149
196
|
});
|
|
150
197
|
</script>
|
|
198
|
+
<script>
|
|
199
|
+
jQuery(function($){
|
|
200
|
+
$(document).ready(function(){
|
|
201
|
+
//URLのハッシュ値を取得
|
|
202
|
+
var urlHash = location.hash;
|
|
203
|
+
//ハッシュ値があればページ内スクロール
|
|
204
|
+
if(urlHash) {
|
|
205
|
+
//スクロールを0に戻す
|
|
206
|
+
$('body,html').stop().scrollTop(0);
|
|
207
|
+
setTimeout(function () {
|
|
208
|
+
//ロード時の処理を待ち、時間差でスクロール実行
|
|
209
|
+
scrollToAnker(urlHash) ;
|
|
210
|
+
}, 100);
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
//通常のクリック時
|
|
214
|
+
$('.icon1,.icon2,.icon3,.icon4,.icon5,.icon6,.icon7').click(function() {
|
|
215
|
+
//ページ内リンク先を取得
|
|
216
|
+
var href= $(this).attr("href");
|
|
217
|
+
//リンク先が#か空だったらhtmlに
|
|
218
|
+
var hash = href == "#" || href == "" ? 'html' : href;
|
|
219
|
+
//スクロール実行
|
|
220
|
+
scrollToAnker(hash);
|
|
221
|
+
//リンク無効化
|
|
222
|
+
return false;
|
|
223
|
+
});
|
|
224
|
+
|
|
225
|
+
// 関数：スムーススクロール
|
|
226
|
+
// 指定したアンカー(#ID)へアニメーションでスクロール
|
|
227
|
+
function scrollToAnker(hash) {
|
|
228
|
+
var target = $('.page-15-p');
|
|
229
|
+
var position = target.offset().top;
|
|
230
|
+
$('body,html').stop().animate({scrollTop:position}, 500);
|
|
231
|
+
}
|
|
232
|
+
})
|
|
233
|
+
});
|
|
234
|
+
</script>
|
|
235
|
+
<script>
|
|
236
|
+
jQuery(function($){
|
|
237
|
+
// liのうち、href属性が指定されているものを取得
|
|
238
|
+
$('li[href]').click(function(){
|
|
239
|
+
let href = $(this).attr('href');
|
|
240
|
+
location.href = href;
|
|
241
|
+
// window.open(href);
|
|
242
|
+
});
|
|
243
|
+
});
|
|
244
|
+
</script>
|
|
151
245
|
```
|
1
説明の修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
idでページリンクさせた場合にURLの末尾に#tab1とついてしまうのですが、URLにアンカーリンクを付加させないでtest.htmlのみにしたく考えています。
|
|
2
|
-
history.replaceState(null, '', location.pathname + location.search);で書き換えしたところURLにアンカーリンクを付加させないようになったのですが、リンク先がページのトップになってしまいました。
|
|
3
2
|
URLにアンカーリンクを付加させないで目的の場所へ移動させたいです。
|
|
4
|
-
また、タブへのダイレクトリンクをさせた場合のジャンプ先の位置をネガティブマージンで調整することは可能でしょうか
|
|
5
3
|
```indexhtml
|
|
6
4
|
<div class="flex">
|
|
7
5
|
<div>
|
|
@@ -137,7 +135,6 @@
|
|
|
137
135
|
//[#tab～]である場合、#より後を取得
|
|
138
136
|
var tabname = hash.slice(7);
|
|
139
137
|
var tabbar = tabname - 1;
|
|
140
|
-
history.replaceState(null, '', location.pathname + location.search);
|
|
141
138
|
}
|
|
142
139
|
$(function() {
|
|
143
140
|
$('.is-active').removeClass('is-active');
|