Web制作記録簿

  1. ホーム /
  2. 2020年 5月

2020年 5月 の投稿一覧

  • 2020.05.17

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

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;
}
});
 
});

タグ

cssテクニック Git gulp jQuery mixin Sass SNS SNSまわり SourceTree よく使う カルーセル タスクランナー ターミナル レスポンシブ

最近の投稿

  • http→https wwwなし→wwwありへのhtaccessへのリダイレクトへの書き方
  • 固定ヘッダーを被らせずに別ページ遷移&ページ内リンク対応させるやつ
  • ど素人のgulpの使い方まとめ
  • ターミナルからサーバーを触るあれこれ
  • フォントをCSSで複数読み込む方法

最近のコメント

    アーカイブ

    • 2020年6月
    • 2020年5月
    • 2019年2月
    • 2017年6月
    • 2017年5月
    • 2017年4月
    • 2017年3月
    • 2017年2月

    カテゴリー

    • Web制作
    • ターミナル
    • 未分類

    メタ情報

    • ログイン
    • 投稿フィード
    • コメントフィード
    • WordPress.org

    固定ページ

    • Calendar
    • Web便利帳

    © Copyright 2025 Web制作記録簿. All rights reserved.