ヘッダーをposition:fixed;で指定しており、別ページの指定した場所へ
ジャンプした際、頭のタイトルがヘッダーにかくれてしまいます。
jsの記述がおかしいのだと思うのですが、正しい記述について、
お分かりの方がいらっしゃればご教示願います。

html
1               <div class="research">
2                    <a href="research.html#a" target="_blank" class="maker">A</a>
3                    <a href="research.html#b" target="_blank" class="maker">B</a>
4                    <a href="research.html#c" target="_blank" class="maker">C</a>
5                    <a href="research.html#d" target="_blank" class="maker">D</a>
6                </div>
7<script>
8    var headerHight = 130; //ヘッダの高さ
9    $('.maker').click(function(){
10        var href= $(this).attr("href");
11        var target = $(href == "#" || href == "" ? 'html' : href);
12        var position = target.offset().top-headerHight; //ヘッダの高さ分位置をずらす
13        $("html, body").animate({scrollTop:position}, 550, "swing");
14        return false;
15    });
16});
17    </script>

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

回答2件

ベストアンサー

javascriptをどうしても使わないといけない場合はスルーしてください。

もしcssでもいいなら(簡単なのは圧倒的にこちらです)ですが、
ページ内リンクの位置調整の仕方をこちらのページで教えてくれてるので、cssでも良ければこれでされてみられたらと思いますよ。

https://y-com.info/contents/?p=5641

投稿2019/07/24 12:19

mari.rinn

総合スコア296

manmaru

2019/07/25 03:35

なるほど。。とくにjsへのこだわりないので、そちらでできれば一番良いです。すみません、まだ試せていないのですが本日中には試させていただきます。

manmaru

2019/07/25 05:46

すみません、ご教示いただいたサイトはまさに私のやりたいことで、構造も理解はできたのですが、どうにも上にずれてくれません。。記述内容を下記記載させていただきますので、何かおかしなところがわかればご指摘いただけますと幸いです。【飛び元】 <div class="research"> <a href="research.html#a" target="_blank" class="anchor">A</a> <a href="research.html#b" target="_blank" class="anchor">B</a> <a href="research.html#c" target="_blank" class="anchor">C</a> <a href="research.html#d" target="_blank" class="anchor">D</a> </div> 【飛び先】 <a href="#a" class="anchor"></a> <div class="box1" id="a"> <h1>治療支援</h1> </div> <h2>投影型拡張現実感による医療支援</h2> <p>モニタを観ながらの作業が長時間続く内視鏡外科手術は術者の負担が大きい。...... 【CSS】 a.anchor { display: block; padding-top: 140px; margin-top: -140px; }

x_x

2019/07/25 06:01

飛び先が #a なら #a と書かなければいけないでしょう……。

manmaru

2019/07/25 08:24

x_x様ご指摘頂いたidを指定をしたらずれてくれました。初歩的で申し訳ありません。ありがとうございました。

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

元のページからではjsで飛び先の見え方は指定できないでしょう
呼び出し後の適正な見せ方はは飛び先側がやることです。
実際にはハッシュで呼び出し位置を調整するくらいですかね

sample

fromPage.html

HTML
1[ <a href="toPage.html#top">top</a> | <a href="toPage.html#target1">target1</a> | <a href="toPage.html#target2">target2</a> ]

toPage.html

javascript
1<script>
2const move=()=>{
3  var top=(document.querySelector(location.hash)||document.querySelector("body")).getBoundingClientRect().top+ window.pageYOffset;
4  var menuHeight=document.querySelector("#menu").getBoundingClientRect().bottom;
5  document.body.scrollTop=top-menuHeight;
6}
7window.addEventListener('pageshow', ()=>{
8  if(location.hash!=="") move();
9  [].forEach.call(document.querySelectorAll('a[href*="#"]'),x=>{
10    var hash=x.getAttribute("href").match(/#.*$/)[0];
11    x.addEventListener('click',e=>{
12      e.preventDefault();
13      location.hash=hash;
14      move();
15    });
16  });
17});
18</script>
19<style>
20body,body *{margin:0px;padding:0px;}
21#menu{height:100px;background-Color:gray;position:fixed;width:100%;}
22#content{padding-top:100px;height:9999px;}
23</style>
24<body>
25<div id="menu">menu [ <a href="#top">top</a> | <a href="#target1">target1</a> | <a href="#target2">target2</a> ]</div>
26<div id="content">
27top<br>
28row1<br>
29row2<br>
30row3<br>
31row4<br>
32row5<br>
33<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
34<a id="target1">target1</a><br>
35row1<br>
36row2<br>
37row3<br>
38row4<br>
39row5<br>
40<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
41<a id="target2">target2</a><br>
42row1<br>
43row2<br>
44row3<br>
45row4<br>
46row5<br>
47</div>
48</div>
49</body>
50

投稿2019/07/24 03:21

編集2019/07/24 05:15

yambejp

総合スコア117667

manmaru

2019/07/25 03:37

ご返信が遅くなり申し訳ありません。やはりfunction「click」はそもそもおかしいですよね。すみません、まだ試せていないのですがご教示いただいた記述にて本日中には試させていただきます。取り急ぎご返信でした。どうもありがとうございます。

manmaru

2019/07/25 08:26

manmaru様質問に対してとても丁寧にご教示くださり、ありがとうございました。ベストアンサーに選ばせていただきたいところなのですが、別の方よりcsscssでの簡単な記述での解決法を教えていただき、うまくいったので、今回はそちらの方をベストアンサーに選ばせて頂きます。 jsの理解がまだまだなので、、解読できるよう勉強していきます。どうもありがとうございました。

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

あなたの回答