1. /
  2. /
  3. 固定ヘッダーを被らせずに別ページ遷移＆ページ内リンク対応させるやつ

固定ヘッダーを被らせずに別ページ遷移＆ページ内リンク対応させるやつ

  • このエントリーをはてなブックマークに追加
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
$(function(){
 
if(window.matchMedia('(min-width:768px)').matches) {
var headerHeight = 150; //固定ヘッダーの高さを入れる;
}else {
var headerHeight = 58;//固定ヘッダーの高さを入れる;
  }
var documentUrl = location.origin + location.pathname + location.search;
 
//ページ内リンク用
jQuery(document).on('click', 'a[href*="#"]', function(event) {
var anchor = event.currentTarget;
var anchorUrl = anchor.protocol + '//' + anchor.host + anchor.pathname + anchor.search;
if (documentUrl !== anchorUrl) {
return true;
}
 
var speed = 500;
var position = $(anchor.hash).offset().top - headerHeight;
setTimeout(function() {// Edge、IE対策でしかたなくいれる setTimeoutで読み込み後の位置指定の発動
jQuery('body,html').animate({ scrollTop: position }, speed, 'swing');
}, 100);
event.preventDefault();
return false;
});
//ページ遷移してきた時用
$(window).on('load', function() {
  if(document.URL.match("#")) {
  var str = location.href ;
  var cut_str = "#";
  var index = str.indexOf(cut_str);
  var href = str.slice(index);
  var target = href;
  var position = $(target).offset().top - headerHeight;
setTimeout(function() {// Edge、IE対策でしかたなくいれる setTimeoutで読み込み後の位置指定の発動
  $("html, body").scrollTop(position);
}, 100);
  return false;
}
});
 
});

  • このエントリーをはてなブックマークに追加

SNSでもご購読できます。

コメントを残す

*