ส่วนหัวของหน้าคงทับซ้อนกับจุดยึดในหน้า

หากฉันมีส่วนหัวที่ไม่เลื่อนในหน้า HTML จับจ้องไปที่ด้านบนมีความสูงที่กำหนด:

มีวิธีใช้ตัวยึด URL ( #fragmentส่วน) เพื่อให้เบราว์เซอร์เลื่อนไปยังจุดที่แน่นอนในหน้า แต่ยังคงเคารพความสูงขององค์ประกอบคงที่โดยความช่วยเหลือของ JavaScriptหรือไม่

http://foo.com/#bar

ผิด (แต่เป็นพฤติกรรมปกติ): ถูกต้อง:
+ --------------------------------- + + -------------- ------------------- +
| BAR /////////////////////// ส่วนหัว | | //////////////////////// // ส่วนหัว |
+ --------------------------------- + + -------------- ------------------- +
| นี่คือส่วนที่เหลือของข้อความ | | บาร์ |
| ... | | |
| ... | | นี่คือส่วนที่เหลือของข้อความ |
| ... | | ... |
+ --------------------------------- + + -------------- ------------------- +

ผมมีปัญหาเดียวกัน. ฉันแก้ไขมันโดยการเพิ่มคลาสให้กับองค์ประกอบสมอด้วยความสูงของแถบด้านบนเป็นค่าเสริมด้านบน

<h1><a class="anchor" name="barlink">Bar</a></h1>

แล้วเพียงแค่ CSS:

.anchor { padding-top: 90px; }

หากคุณไม่สามารถหรือไม่ต้องการตั้งคลาสใหม่ให้เพิ่ม::beforeองค์ประกอบ:targetหลอกระดับความสูงคงที่ให้กับคลาสหลอกใน CSS:

:target::before {
  content: "";
  display: block;
  height: 60px; /* fixed header height*/
  margin: -60px 0 0; /* negative fixed header height */
}

หรือเลื่อนหน้าเทียบ:targetกับ jQuery:

var offset = $(':target').offset();
var scrollto = offset.top - 60; // minus fixed header height
$('html, body').animate({scrollTop:scrollto}, 0);

ฉันใช้วิธีนี้:

/* add class="jumptarget" to all targets. */

.jumptarget::before {
  content:"";
  display:block;
  height:50px; /* fixed header height*/
  margin:-50px 0 0; /* negative fixed header height */
}

มันเพิ่มองค์ประกอบที่มองไม่เห็นก่อนเป้าหมาย มันใช้งานได้กับ IE8 +

นี่คือโซลูชันเพิ่มเติม: http://nicolasgallagher.com/jump-links-and-viewport-positioning/

Bootstrap อย่างเป็นทางการยอมรับคำตอบ:

*[id]:before { 
  display: block; 
  content: " "; 
  margin-top: -75px; // Set the Appropriate Height
  height: 75px; // Set the Appropriate Height
  visibility: hidden; 
}

เครดิต

ผสาน

html {
  scroll-padding-top: 70px; /* height of sticky header */
}

จาก: https://css-tricks.com/fixed-headers-on-page-links-and-overlapping-content-oh-my/

วิธีที่ดีที่สุดที่ฉันพบเพื่อจัดการปัญหานี้คือ (แทนที่ 65px ด้วยความสูงองค์ประกอบคงที่ของคุณ):

div:target {
  padding-top: 65px; 
  margin-top: -65px;
}

หากคุณไม่ต้องการใช้ตัวเลือกเป้าหมายคุณสามารถทำได้ด้วยวิธีนี้:

.my-target {
    padding-top: 65px;
    margin-top: -65px;
}

หมายเหตุ: ตัวอย่างนี้จะไม่ทำงานหากองค์ประกอบเป้าหมายมีสีพื้นหลังที่แตกต่างจากแม่ของเขา ตัวอย่างเช่น:

<div style="background-color:red;height:100px;"></div>
<div class="my-target" style="background-color:green;height:100px;"></div>

ในกรณีนี้สีเขียวขององค์ประกอบเป้าหมายของฉันจะเขียนทับองค์ประกอบสีแดงหลักของเขาใน 65px ฉันไม่พบโซลูชัน CSS บริสุทธิ์ใด ๆ ที่จะจัดการกับปัญหานี้ แต่ถ้าคุณไม่มีสีพื้นหลังอื่นโซลูชันนี้ดีที่สุด

แม้ว่าโซลูชันที่เสนอบางข้อสามารถใช้งานได้กับลิงก์แฟรกเมนต์ (= ลิงก์แฮช) ในหน้าเดียวกัน (เช่นลิงก์เมนูที่เลื่อนลง) ฉันพบว่าไม่มีการทำงานใด ๆ ใน Chrome ปัจจุบันเมื่อคุณต้องการใช้ลิงก์แฟรกเมนต์ที่มาจากที่อื่น หน้า

ดังนั้นการโทร www.mydomain.com/page.html#foo ตั้งแต่เริ่มต้นจะไม่ชดเชยเป้าหมายของคุณใน Chrome ปัจจุบันด้วยโซลูชัน CSS หรือโซลูชัน JS ที่กำหนด

นอกจากนี้ยังมีรายงานข้อผิดพลาด jQuery ที่อธิบายรายละเอียดของปัญหา

สารละลาย

ตัวเลือกเดียวที่ฉันพบจนถึงขณะนี้ที่ใช้งานได้จริงใน Chrome คือ JavaScript ที่ไม่ได้เรียกว่า onDomReady แต่มีความล่าช้า

// set timeout onDomReady
$(function() {
    setTimeout(delayedFragmentTargetOffset, 500);
});

// add scroll offset to fragment target (if there is one)
function delayedFragmentTargetOffset(){
    var offset = $(':target').offset();
    if(offset){
        var scrollto = offset.top - 95; // minus fixed header height
        $('html, body').animate({scrollTop:scrollto}, 0);
    }
}

สรุป

หากไม่มีวิธีแก้ปัญหาความล่าช้าของ JS อาจทำงานได้ใน Firefox, IE, Safari แต่ไม่ใช่ใน Chrome

เมื่อCSS Scroll Snap สเป็คเข้ามาในเกมจึงเป็นไปได้อย่างง่ายดายด้วยscroll-margin-topคุณสมบัติ ปัจจุบันทำงานบน Chrome และ Opera (เมษายน 2019) Safari 11+ ก็ควรสนับสนุนสิ่งนี้เช่นกัน แต่ฉันไม่สามารถเรียกใช้บน Safari 11 ได้เราอาจต้องรอให้คนอื่นแก้ไขมันให้ได้

ตัวอย่าง Codepen

body {
  padding: 0;
  margin: 0;
}

h1,
p {
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
}
h1 {
  scroll-margin-top: 6rem; /* One line solution. :-) */
}
.header {
  position: sticky;
  top: 0;
  background-color: red;
  text-align: center;
  padding: 1rem;
}
.header .scroll {
  display: block;
  color: white;
  margin-bottom: 0.5rem;
}
.header .browsers {
  color: black;
  font-size: 0.8em;
}

<header class="header">
  <a class="scroll" href="#heading">Scroll to heading</a>
  <span class="browsers" >Chrome 69+, Opera 56+ and Safari 11+ only</span>
</header>
<p>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<h1 id="heading">What is Lorem Ipsum?</h1>
<p>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>
  

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pulvinar eleifend dolor, in cursus augue interdum quis. Morbi volutpat pulvinar nisl et condimentum. Quisque elit lacus, egestas non ante sit amet, hendrerit commodo dui. Nunc ac sagittis dolor. Proin iaculis ante non est pharetra, et ullamcorper nisl accumsan. Aenean quis leo vel sapien eleifend aliquam. Pellentesque finibus dui ex, blandit tristique risus vestibulum vitae. Nam a quam ac turpis porta eleifend. Sed at hendrerit risus, ac efficitur ante. Aenean pretium justo feugiat condimentum consectetur. Etiam mattis urna id porta hendrerit.
</p>
<p>
Mauris venenatis quam sed egestas auctor. Fusce lacus eros, condimentum nec quam vel, malesuada gravida libero. Praesent vel sollicitudin justo. Donec mattis nisl id mauris scelerisque, quis placerat lectus scelerisque. Ut id justo a magna mattis luctus. Suspendisse massa est, pretium vel suscipit sit amet, iaculis at mi. Aenean vulputate ipsum non consectetur sodales. Proin aliquet erat nec mi eleifend, eu dapibus enim ultrices. Sed fringilla tortor ac rhoncus consectetur. Aliquam aliquam orci ultrices tortor bibendum facilisis.
</p>
<p>
Donec ultrices diam quam, non tincidunt purus scelerisque aliquam. Nam pretium interdum lacinia. Donec sit amet diam odio. Donec eleifend nibh ut arcu dictum, in vulputate magna malesuada. Nam id dignissim tortor. Suspendisse commodo, nunc sit amet blandit laoreet, turpis nibh rhoncus mi, et finibus nisi diam sed erat. Vivamus diam arcu, placerat in ultrices eu, porta ut tellus. Aliquam vel nisi nisi.
</p>
<p>
Integer ornare finibus sem, eget vulputate lacus ultrices ac. Vivamus aliquam arcu sit amet urna facilisis consectetur. Sed molestie dolor et tortor elementum, nec bibendum tortor cursus. Nulla ipsum nulla, luctus nec fringilla id, sagittis et sem. Etiam at dolor in libero pharetra consequat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse quis turpis non diam mattis varius. Praesent at gravida mi. Etiam suscipit blandit dolor, nec convallis lectus mattis vitae. Mauris placerat erat ipsum, vitae interdum mauris consequat quis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p>
Nunc efficitur scelerisque elit. Integer ac massa ipsum. Cras volutpat nulla purus, quis molestie dolor iaculis eget. Maecenas ut ex nulla. Pellentesque sem augue, ornare ut arcu eu, porttitor consectetur orci. Aenean iaculis blandit quam, in efficitur justo sodales auctor. Vivamus dignissim pellentesque risus eget consequat. Pellentesque sit amet nisi in urna convallis egestas vitae nec mauris. 
</p>

สำหรับ Chrome / Safari / Firefox คุณสามารถเพิ่มdisplay: blockและใช้มาร์จิ้นติดลบเพื่อชดเชยออฟเซตเช่น:

a[name] {
    display: block;
    padding-top: 90px;
    margin-top: -90px;
}

ดูตัวอย่างhttp://codepen.io/swed/pen/RrZBJo

คุณสามารถทำได้ด้วย jQuery:

var offset = $('.target').offset();
var scrollto = offset.top - 50; // fixed_top_bar_height = 50px
$('html, body').animate({scrollTop:scrollto}, 0);

เพิ่งค้นพบวิธีแก้ปัญหา CSS บริสุทธิ์อื่นที่ใช้งานได้ดีสำหรับฉัน!

html {
  scroll-padding-top: 80px; /* height of your sticky header */
}

พบในเว็บไซต์นี้ !

คุณสามารถลองสิ่งนี้:

<style>
h1:target { padding-top: 50px; }
</style>

<a href="#bar">Go to bar</a>

<h1 id="bar">Bar</h1>

ตั้งค่าการเติมด้านบนเป็นความสูงจริงของส่วนหัวของคุณ วิธีนี้จะแนะนำช่องว่างพิเศษเล็กน้อยที่ด้านบนของส่วนหัวของคุณ แต่จะปรากฏเฉพาะเมื่อผู้ใช้ข้ามไปที่จุดยึดแล้วเลื่อนขึ้น ฉันได้สร้างโซลูชันสำหรับเว็บไซต์ของฉันในตอนนี้ แต่มันแสดงแถบคงที่เล็ก ๆ ที่ด้านบนของหน้าเท่านั้นไม่มีอะไรสูงเกินไป

ฉันทำให้มันทำงานได้อย่างง่ายดายกับ CSS และ HTML โดยใช้วิธี "anchor: before" ที่กล่าวถึงข้างต้น ฉันคิดว่ามันใช้งานได้ดีที่สุดเพราะมันไม่ได้สร้างช่องว่างขนาดใหญ่ระหว่าง div ของคุณ

.anchor:before {
  content:"";
  display:block;
  height:60px; /* fixed header height*/
  margin:-60px 0 0; /* negative fixed header height */
}

ดูเหมือนจะใช้งานไม่ได้สำหรับ div แรกบนหน้าเว็บ แต่คุณสามารถตอบโต้ด้วยการเพิ่ม padding ไปที่ div แรก

#anchor-one{padding-top: 60px;}

นี่คือซอที่ใช้งานได้: http://jsfiddle.net/FRpHE/24/

มันเหมาะกับฉัน:

ลิงค์ HTML ไปที่ Anchor:

<a href="#security">SECURITY</a>

HTML Anchor:

<a name="security" class="anchor"></a>

CSS:

.anchor::before {
    content: "";
    display: block;
    margin-top: -50px;
    position: absolute;
}

ฉันใช้คำตอบ @ Jpsy แต่ด้วยเหตุผลด้านประสิทธิภาพฉันตั้งค่าตัวจับเวลาเฉพาะเมื่อแฮชมีอยู่ใน URL

$(function() {
      // Only set the timer if you have a hash
      if(window.location.hash) {
        setTimeout(delayedFragmentTargetOffset, 500);
      }
  });

function delayedFragmentTargetOffset(){
      var offset = $(':target').offset();
      if(offset){
          var scrollto = offset.top - 80; // minus fixed header height
          $('html, body').animate({scrollTop:scrollto}, 0);
          $(':target').highlight();
      }
  };

ฉันมีปัญหากับคำตอบมากมายที่นี่และที่อื่น ๆ เนื่องจากจุดยึดที่คั่นหน้าของฉันเป็นส่วนหัวในหน้าคำถามที่พบบ่อยดังนั้นการชดเชยส่วนหัวไม่ได้ช่วยเพราะเนื้อหาที่เหลือจะอยู่ที่เดิม ดังนั้นฉันคิดว่าฉันโพสต์

สิ่งที่ฉันทำคือการรวมกันของการแก้ปัญหาบาง

1. CSS:

   .bookmark {
       margin-top:-120px;
       padding-bottom:120px; 
       display:block;
   }

โดยที่ "120px" คือความสูงส่วนหัวคงที่ของคุณ (อาจเพิ่มระยะขอบบางส่วน)

2. ลิงก์บุ๊กมาร์ก HTML:

   <a href="#01">What is your FAQ question again?</a>

3. HTML เนื้อหาที่คั่นหน้า:

   <span class="bookmark" id="01"></span>
   <h3>What is your FAQ question again?</h3>
   <p>Some FAQ text, followed by ...</p>
   <p>... some more FAQ text, etc ...</p>

สิ่งที่ดีเกี่ยวกับการแก้ปัญหานี้คือspanองค์ประกอบไม่เพียง แต่ซ่อนอยู่ แต่มันก็ยุบตัวลงและไม่ได้ทำลายเนื้อหาของคุณ

ฉันไม่สามารถได้รับเครดิตจำนวนมากสำหรับโซลูชันนี้เนื่องจากมาจากทรัพยากรที่แตกต่างกันมากมาย แต่มันทำงานได้ดีที่สุดสำหรับฉันในสถานการณ์ของฉัน

ท่านสามารถเข้าดูผลที่เกิดขึ้นจริงที่นี่

ฉันไม่มีโชคกับคำตอบข้างต้นและลงเอยด้วยการใช้โซลูชันนี้ซึ่งทำงานได้อย่างสมบูรณ์แบบ ...

สร้างช่วงว่างเปล่าที่คุณต้องการตั้งค่าจุดยึดของคุณ

<span class="anchor" id="section1"></span>
<div class="section"></div>

และใช้คลาสต่อไปนี้:

.anchor {
  display: block;
  height: 115px;       /* same height as header */
  margin-top: -115px;  /* same height as header */
  visibility: hidden;
}

วิธีการแก้ปัญหานี้จะทำงานแม้ว่าส่วนที่มีพื้นหลังสีแตกต่างกัน! ฉันพบวิธีแก้ปัญหาที่ลิงก์นี้

มันค่อนข้างแฮ็คในใจคนเจ้าระเบียบของฉัน แต่ในฐานะที่เป็น css-only คุณสามารถเพิ่มช่องว่างภายในองค์ประกอบที่ยึดไว้โดยใช้:targetตัวเลือก:

html, body {height:100%; min-height:100%; margin:0;}
body {min-height:200%;}
header {display:inline-block; position:fixed; font-size:1.5em; height:100px; top:0; left:0; right:0; line-height:100px; background:black; text-align:center;}
header a {color:#fff;}
section {padding:30px; margin:20px;}
section:first-of-type, section:target {padding-top:130px;}

<header><a href="#one">#One</a> <a href="#two">#two</a> <a href="#three">#three</a></header>
<section id="one"><h1>One</h1>Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</section>
<section id="two"><h1>Two</h1>Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</section>
<section id="three"><h1>Three</h1>Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</section>

ฉันพบว่าฉันต้องใช้ทั้ง CSSของMutttenXdและBadabamร่วมกันเนื่องจากวิธีแรกไม่ได้ทำงานใน Chrome และตัวที่สองไม่ทำงานใน Firefox:

a.anchor { 
  padding-top: 90px;
}

a.anchor:before { 
  display: block;
  content: "";
  height: 90px;
  margin-top: -90px;
}

<a class="anchor" name="shipping"></a><h2>Shipping (United States)</h2>
...

วิธีที่ฉันพบว่าสะอาดที่สุดคือวิธีต่อไปนี้:

  #bar::before {
    display: block;
    content: " ";
    margin-top: -150px;
    height: 150px;
    visibility: hidden;
    pointer-events: none;
  }

วิธีการล่วงล้ำน้อยที่สุดโดยใช้ jQuery:

Link:

<a href="#my-anchor-1" class="anchor-link">Go To Anchor 1</a>

เนื้อหา:

<h3 id="my-anchor-1">Here is Anchor 1</a>

สคริปต์:

$(".anchor-link").click(function() {
    var headerHeight = 120;
    $('html, body').stop(true, true).animate({
        scrollTop: $(this.hash).offset().top - headerHeight
    }, 750);
    return false;
});

โดยการกำหนดคลาส anchor-link ให้กับลิงก์พฤติกรรมของลิงก์อื่น ๆ (เช่นการควบคุมหีบเพลงหรือแท็บ) จะไม่ได้รับผลกระทบ

คำถามไม่ต้องการจาวาสคริปต์ แต่คำถามยอดนิยมอื่น ๆถูกปิดเนื่องจากคำถามนี้และฉันไม่สามารถตอบได้

ฉันต้องการบางสิ่งที่ใช้ได้กับลิงก์ขาเข้าลิงก์ในหน้าและที่สามารถกำหนดเป้าหมายโดย JS เพื่อให้หน้าสามารถตอบสนองต่อการเปลี่ยนแปลงความสูงของส่วนหัว

HTML

<ul>
  <li><a href="#ft_who">Who?</a></li>
  <li><a href="#ft_what">What?</a></li>
  <li><a href="#ft_when">When?</a></li>
</ul>
...
<h2 id="ft_who" class="fragment-target">Who?</h2> 
...
<a href="#">Can I be clicked?</a>
<h2 id="ft_what" class="fragment-target">What?</h2>
...
<h2 id="ft_when" class="fragment-target">When?</h2> 

CSS

.fragment-target {
    display: block;
    margin-top: -HEADER_HEIGHTpx;
    padding-top: HEADER_HEIGHTpx;
    z-index: -1;
}

z-index: -1ช่วยให้การเชื่อมโยงใน 'พื้นที่ padding' เหนือส่วนเป้าหมายยังคงสามารถคลิกได้ตามที่แสดงความเห็นโดย @MuttenXd ในคำตอบของเขา

ฉันยังไม่พบปัญหาใน IE 11, Edge 15+, Chrome 38+, FF 52+ หรือ Safari 9.1+

<div style="position:relative; top:-45px;">
    <a name="fragment"> </a>
</div>

รหัสนี้ควรทำเคล็ดลับ สลับ 45px สำหรับความสูงของแถบส่วนหัวของคุณ

แก้ไข: หากใช้ jQuery เป็นตัวเลือกฉันก็ประสบความสำเร็จในการใช้ jQuery.localScroll ด้วยชุดค่าออฟเซ็ต ตัวเลือกออฟเซ็ตเป็นส่วนหนึ่งของ jQuery.scrollTo ซึ่ง jQuery.localScroll ถูกสร้างขึ้น มีตัวอย่างให้ดูที่นี่: http://demos.flesler.com/jquery/scrollTo/ (หน้าต่างที่สองภายใต้ 'offset')

นี่คือ jquery solution ที่สมบูรณ์ที่จะทำงานใน IE:

สมมติว่าองค์ประกอบแถบนำทางมีลักษณะดังนี้:

<ul>
    <li><a class="navigation" href="/#contact-us">Contact us</a></li>
    <li><a class="navigation" href="/#about-us">About us</a></li>
</ul>

คุณสามารถใช้ตัวอย่าง jquery ต่อไปนี้เพื่อชดเชยการเลื่อน:

$(function() {
    $("a.navigation").click(function(event) {
        event.preventDefault();
        offSetScroll($(this));
    });
    offSetScrollFromLocation(window.location.href.toLowerCase());
});

function offSetScroll(anchor) {
    var href = anchor.attr("href");
    offSetScrollFromLocation(href);
}

function offSetScrollFromLocation(href) {
    //Change this according to the height of the navigation bar
    var fromTop = 250;
    if(href.indexOf("#")<=0)
        return;
    var hash=href.substring(href.indexOf("#"));
    var targetOffset = $(hash).offset().top-fromTop;
    $('html, body').animate({scrollTop: targetOffset}, 400, function(e) {

    });
}

การใช้งานนั้นใช้:beforeงานได้ดีจนกระทั่งเราตระหนักว่าองค์ประกอบปลอมนั้นถูกปกปิดและปิดกั้นเหตุการณ์ของตัวชี้ที่อยู่ภายในพื้นที่ขององค์ประกอบหลอก การใช้บางอย่างเช่นpointer-events: noneบน:beforeหรือแม้กระทั่งบนสมอโดยตรงจะไม่มีผลกระทบใด ๆ

สิ่งที่เราทำลงไปคือการทำให้ตำแหน่งของสมอเรือสมบูรณ์และจากนั้นปรับตำแหน่งให้เป็นออฟเซ็ต / ความสูงของพื้นที่คงที่

Offset Anchor โดยไม่ปิดกั้นกิจกรรมของตัวชี้

.section-marker {

    position: absolute;
    top: -300px;
}

คุณค่าของสิ่งนี้คือเราไม่ได้ปิดกั้นองค์ประกอบใด ๆ ที่อาจตกอยู่ภายใน 300px เหล่านั้น ข้อเสียคือการคว้าตำแหน่งขององค์ประกอบนั้นจาก Javascript ต้องคำนึงถึงว่าออฟเซ็ตจึงต้องปรับตรรกะใด ๆ

นี่คือวิธีที่ฉันได้รับไปในที่สุดไปยังสถานที่ที่เหมาะสมเมื่อคุณคลิกที่การนำทาง ฉันเพิ่มตัวจัดการเหตุการณ์สำหรับการนำทางการนำทาง จากนั้นคุณสามารถใช้ "scrollBy" เพื่อเลื่อนขึ้นบนออฟเซ็ต

var offset = 90;

 $('.navbar li a').click(function(event) {
    event.preventDefault();
    $($(this).attr('href'))[0].scrollIntoView();
    scrollBy(0, -offset);
 });

ฉันสร้าง div ที่มีการขึ้นบรรทัดใหม่ไม่กี่ครั้งและให้รหัสนั้นฉันใส่รหัสที่ฉันต้องการแสดงภายใต้ ลิงก์จะนำคุณไปยังพื้นที่ด้านบนของภาพและส่วนหัวจะไม่ขวางหน้า:

<a href="#image">Image</a>
<div id="image"><br><br></div>
<img src="Image.png">

แน่นอนคุณสามารถเปลี่ยนจำนวนการขึ้นบรรทัดใหม่เพื่อให้เหมาะกับความต้องการของคุณ สิ่งนี้ทำงานได้อย่างสมบูรณ์แบบสำหรับฉันไม่แน่ใจว่ามีปัญหาใด ๆ หรือไม่ฉันยังคงเรียนรู้ HTML อยู่

ใช้สคริปต์นี้

$(document).on('click', 'a[href^="#"]', function (event) {
    event.preventDefault();

    $('html, body').animate({
        scrollTop: $($.attr(this, 'href')).offset().top -140
    }, 1000);
});

ฉันคิดว่าวิธีนี้มีประโยชน์มากกว่า:

<h2 id="bar" title="Bar">Bar</h2>

[id]:target {
    display: block;
    position: relative;
    top: -120px;
    visibility: hidden;
}

[id]:target::before {
    content: attr(title);
    top: 120px;
    position: relative;
    visibility: visible;
}

ตอนนี้คุณสามารถใช้เลื่อนขอบด้านบนซึ่งเป็นที่รักการยอมรับอย่างกว้างขวาง

เพียงเพิ่ม CSS ต่อไปนี้ในองค์ประกอบที่คุณต้องการเลื่อนไปที่:

.element {
  scroll-margin-top: 2em;
}