ทำให้จุดยึดลิงก์ไปที่พิกเซลเหนือจุดที่เชื่อมโยง

ฉันไม่แน่ใจว่าวิธีที่ดีที่สุดในการถาม / ค้นหาคำถามนี้:

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

สิ่งนี้สมเหตุสมผลไหม เป็นไปได้หรือไม่

แก้ไขเพื่อแสดงโค้ด - เป็นเพียงแท็กจุดยึด:

<a href="#anchor">Click me!</a>

<p id="anchor">I should be 100px below where I currently am!</p>

window.addEventListener("hashchange", function () {
    window.scrollTo(window.scrollX, window.scrollY - 100);
});

สิ่งนี้จะช่วยให้เบราว์เซอร์ทำงานในการกระโดดไปที่จุดยึดให้เราจากนั้นเราจะใช้ตำแหน่งนั้นเพื่อหักล้างจาก

แก้ไข 1:

ตามที่ @erb ชี้ให้เห็นสิ่งนี้จะใช้ได้เฉพาะเมื่อคุณอยู่ในเพจในขณะที่แฮชมีการเปลี่ยนแปลง การเข้าสู่หน้าที่มี#somethingURL อยู่แล้วใช้ไม่ได้กับโค้ดด้านบน นี่คือเวอร์ชันอื่นที่จะจัดการกับสิ่งนั้น:

// The function actually applying the offset
function offsetAnchor() {
    if(location.hash.length !== 0) {
        window.scrollTo(window.scrollX, window.scrollY - 100);
    }
}

// This will capture hash changes while on the page
window.addEventListener("hashchange", offsetAnchor);

// This is here so that when you enter the page with a hash,
// it can provide the offset in that case too. Having a timeout
// seems necessary to allow the browser to jump to the anchor first.
window.setTimeout(offsetAnchor, 1); // The delay of 1 is arbitrary and may not always work right (although it did in my testing).

หมายเหตุ: ในการใช้ jQuery คุณสามารถแทนที่window.addEventListenerด้วย$(window).onในตัวอย่างได้ ขอบคุณ @Neon

แก้ไข 2:

ตามที่ระบุไว้ข้างต้นจะล้มเหลวหากคุณคลิกที่จุดยึดลิงก์เดียวกันสองครั้งขึ้นไปติดต่อกันเนื่องจากไม่มีhashchangeเหตุการณ์ใดที่จะบังคับให้หักล้างได้

โซลูชันนี้เป็นคำแนะนำจาก @Mave เวอร์ชันที่แก้ไขเล็กน้อยและใช้ตัวเลือก jQuery เพื่อความเรียบง่าย

// The function actually applying the offset
function offsetAnchor() {
  if (location.hash.length !== 0) {
    window.scrollTo(window.scrollX, window.scrollY - 100);
  }
}

// Captures click events of all <a> elements with href starting with #
$(document).on('click', 'a[href^="#"]', function(event) {
  // Click events are captured before hashchanges. Timeout
  // causes offsetAnchor to be called after the page jump.
  window.setTimeout(function() {
    offsetAnchor();
  }, 0);
});

// Set the offset when entering page with hash present in the url
window.setTimeout(offsetAnchor, 0);

JSFiddle สำหรับตัวอย่างนี้อยู่ที่นี่

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

#anchor {
    padding-top: 50px;
    margin-top: -50px;
}

ฉันไม่แน่ใจว่านี่เป็นทางออกที่ดีที่สุดในทุกกรณีหรือไม่ แต่ก็ใช้ได้ดีสำหรับฉัน

ทางออกที่ดียิ่งขึ้น:

<p style="position:relative;">
    <a name="anchor" style="position:absolute; top:-100px;"></a>
    I should be 100px below where I currently am!
</p>

เพียงแค่วางตำแหน่ง<a>แท็กด้วยการวางตำแหน่งที่แน่นอนภายในวัตถุที่อยู่ในตำแหน่งที่ค่อนข้าง

ใช้งานได้เมื่อเข้าสู่เพจหรือผ่านการเปลี่ยนแปลงแฮชภายในเพจ

นี่คือคำตอบปี 2020 สำหรับสิ่งนี้:

#anchor {
  scroll-margin-top: 100px;
}

เพราะได้รับการสนับสนุนอย่างกว้างขวาง !

ทางออกที่ดีที่สุด

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

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

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

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

สิ่งนี้จะทำงานได้โดยไม่ต้องใช้ jQuery และในการโหลดหน้า

(function() {
    if (document.location.hash) {
        setTimeout(function() {
            window.scrollTo(window.scrollX, window.scrollY - 100);
        }, 10);
    }
})();

หากต้องการเชื่อมโยงไปยังองค์ประกอบจากนั้น 'วางตำแหน่ง' องค์ประกอบนั้นตามระยะทางที่กำหนดเองจากด้านบนของหน้าโดยใช้ CSS บริสุทธิ์คุณจะต้องใช้padding-topวิธีนี้องค์ประกอบยังคงอยู่ในตำแหน่งที่ด้านบนของหน้าต่าง แต่ปรากฏขึ้นอย่างเห็นได้ชัดเพื่อจัดตำแหน่งให้อยู่ในระยะห่างจากด้านบนของพอร์ตมุมมองตัวอย่างเช่น:

<a href="#link1">Link one</a>
<a href="#link2">Link two</a>

<div id="link1">
    The first.
</div>

<div id="link2">
    The second.
</div>

CSS:

div {
    /* just to force height, and window-scrolling to get to the elements.
       Irrelevant to the demo, really */
    margin-top: 1000px;
    height: 1000px;
}

#link2 {
    /* places the contents of the element 100px from the top of the view-port */
    padding-top: 100px;
}

สาธิต JS ซอ

ในการใช้วิธี JavaScript ธรรมดา:

function addMargin() {
    window.scrollTo(0, window.pageYOffset - 100);
}

window.addEventListener('hashchange', addMargin);

สาธิต JS ซอ

สิ่งนี้ควรใช้งานได้:

    $(document).ready(function () {
    $('a').on('click', function (e) {
        // e.preventDefault();

        var target = this.hash,
            $target = $(target);

       $('html, body').stop().animate({
        'scrollTop': $target.offset().top-49
    }, 900, 'swing', function () {
    });

        console.log(window.location);

        return false;
    });
});

เพียงแค่เปลี่ยน. top-49 ให้เหมาะกับสมอลิงค์ของคุณ

หากคุณใช้ชื่อจุดยึดที่ชัดเจนเช่น

<a name="sectionLink"></a>
<h1>Section<h1>

จากนั้นใน css คุณสามารถตั้งค่าได้

A[name] {
    padding-top:100px;
}

สิ่งนี้จะใช้ได้ตราบเท่าที่แท็กจุดยึด HREF ของคุณไม่ได้ระบุแอตทริบิวต์ NAME

คำตอบของ Eric นั้นยอดเยี่ยม แต่คุณไม่จำเป็นต้องหมดเวลานั้นจริงๆ หากคุณใช้ jQuery คุณสามารถรอให้หน้าโหลดได้ ดังนั้นฉันขอแนะนำให้เปลี่ยนรหัสเป็น:

// The function actually applying the offset
function offsetAnchor() {
    if (location.hash.length !== 0) {
        window.scrollTo(window.scrollX, window.scrollY - 100);
    }
}

// This will capture hash changes while on the page
$(window).on("hashchange", function () {
    offsetAnchor();
});

// Let the page finish loading.
$(document).ready(function() {
    offsetAnchor();
});

สิ่งนี้ยังทำให้เรากำจัดปัจจัยตามอำเภอใจนั้นได้

ลองใช้รหัสนี้มันมีภาพเคลื่อนไหวที่ราบรื่นอยู่แล้วเมื่อคลิกที่ลิงค์

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

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

ทางออกที่ง่ายที่สุด:

CSS

#link {
    top:-120px; /* -(some pixels above) */
    position:relative;
    z-index:5;
}

HTML

<body>
    <a href="#link">Link</a>
    <div>
        <div id="link"></div> /*this div should placed inside a target div in the page*/
        text
        text
        text
    <div>
</body>

โซลูชันของ Thomas ที่แตกต่างกัน: องค์ประกอบ CSS >ตัวเลือกองค์ประกอบมีประโยชน์ที่นี่:

CSS

.paddedAnchor{
  position: relative;
}
.paddedAnchor > a{
  position: absolute;
  top: -100px;
}

HTML

<a href="#myAnchor">Click Me!</a>

<span class="paddedAnchor"><a name="myAnchor"></a></span>

การคลิกที่ลิงค์จะย้ายตำแหน่งการเลื่อนไปที่ 100px ด้านบนทุกที่ขององค์ประกอบที่มีคลาสเป็น paddedAnchorอยู่

รองรับในเบราว์เซอร์ที่ไม่ใช่ IE และใน IE จากเวอร์ชัน 9 สำหรับการรองรับ IE 7 และ 8 <!DOCTYPE>จะต้องมีการประกาศ

ฉันเพิ่งค้นพบวิธีง่ายๆสำหรับตัวเอง มีขอบด้านบน 15px

HTML

<h2 id="Anchor">Anchor</h2>

CSS

h2{margin-top:-60px; padding-top:75px;}

ใช้ css เท่านั้นและไม่มีปัญหากับเนื้อหาที่ครอบคลุมและไม่สามารถคลิกได้มาก่อน (ประเด็นนี้คือตัวชี้เหตุการณ์: ไม่มี):

CSS

.anchored::before {
    content: '';
    display: block;
    position: relative;
    width: 0;
    height: 100px;
    margin-top: -100px;
}

HTML

<a href="#anchor">Click me!</a>
<div style="pointer-events:none;">
<p id="anchor" class="anchored">I should be 100px below where I currently am!</p>
</div>

ใส่สไตล์นี้:

.hash_link_tag{margin-top: -50px; position: absolute;}

และใช้คลาสนี้ในdivแท็กแยกก่อนลิงก์ตัวอย่าง:

<div class="hash_link_tag" id="link1"></div> 
<a href="#link1">Link1</a>

หรือใช้รหัส php นี้สำหรับแท็กลิงค์ก้อง:

function HashLinkTag($id)
{
    echo "<div id='$id' class='hash_link_tag'></div>";
}

ฉันรู้ว่ามันช้าไปหน่อย แต่ฉันพบว่ามีบางอย่างที่สำคัญมากในการใส่รหัสของคุณหากคุณใช้ Scrollspy ของ Bootstrap ( http://getbootstrap.com/javascript/#scrollspy )

นี่ทำให้ฉันบ้าไปหลายชั่วโมง

ค่าชดเชยสำหรับสายลับแบบเลื่อนต้องตรงกับ window.scrollY มิฉะนั้นคุณจะเสี่ยงต่อการ:

1. ได้รับเอฟเฟกต์การกะพริบแปลก ๆ เมื่อเลื่อน
2. คุณจะพบว่าเมื่อคุณคลิกที่จุดยึดคุณจะเข้าสู่ส่วนนั้น แต่สายลับเลื่อนจะถือว่าคุณเป็นส่วนที่อยู่ด้านบน

 var body = $('body');
    body.scrollspy({
        'target': '#nav',
        'offset': 100 //this must match the window.scrollY below or you'll have a bad time mmkay
});

$(window).on("hashchange", function () {
        window.scrollTo(window.scrollX, window.scrollY - 100);
});

จากโซลูชัน @Eric Olson เพียงแค่ปรับเปลี่ยนเล็กน้อยเพื่อรวมองค์ประกอบจุดยึดที่ฉันต้องการให้เป็นพิเศษ

// Function that actually set offset
function offsetAnchor(e) {
    // location.hash.length different to 0 to ignore empty anchor (domain.me/page#)
    if (location.hash.length !== 0) {
        // Get the Y position of the element you want to go and place an offset
        window.scrollTo(0, $(e.target.hash).position().top - 150);
    }
}

// Catch the event with a time out to perform the offset function properly
$(document).on('click', 'a[href^="#"]', function (e) {
    window.setTimeout(function () {
        // Send event to get the target id later
        offsetAnchor(e);
    }, 10);
});

ฉันเพิ่งมีปัญหาเดียวกัน ฉันมีการนำทางที่ถูกพิกซ์และฉันต้องการให้อังกอร์เริ่มต้นภายใต้การนำทาง วิธีแก้ปัญหาwindow.addEventListener...ไม่ได้ผลสำหรับฉันเพราะฉันตั้งค่าหน้าของฉันscroll-behavior:smoothให้มันตั้งค่าออฟเซ็ตแทนที่จะเลื่อนไปที่อังกอร์ การsetTimeout()ทำงานหากมีเวลาว่างสำหรับการเลื่อนไปจนสุด แต่ก็ยังดูไม่ดี เพื่อแก้ปัญหาของฉันคือการเพิ่ม div แน่นอน posited ในอังกอร์ด้วยและheight:[the height of the nav] bottom:100%ในกรณีนี้ div นี้สิ้นสุดที่ด้านบนขององค์ประกอบอังกอร์และเริ่มต้นที่ตำแหน่งที่คุณจะเลื่อนอังกอร์ ตอนนี้สิ่งที่ฉันทำคือตั้งค่าลิงก์อังกอร์ไปที่ div สัมบูรณ์นี้และ wor done :)

html,body{
    margin:0;
    padding:0;
    scroll-behavior:smooth;
}

nav {
    height:30px;
    width:100%;
    font-size:20pt;
    text-align:center;
    color:white;
    background-color:black;
    position:relative;
}

#my_nav{
    position:fixed;
    z-index:3;
}
#fixer_nav{
    position:static;
}

#angkor{
    position:absolute;
    bottom:100%;
    height:30px;
}

<nav id="my_nav"><a href="#angkor">fixed position nav<a/></nav>
<nav id="fixer_nav"></nav>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nec lacus vel eros rutrum volutpat. Cras ultrices enim sit amet odio dictum, eget consectetur mi pellentesque. Sed mollis gravida nulla, eu euismod turpis efficitur id. Integer pretium posuere fringilla. Aenean laoreet, augue non pharetra elementum, lectus massa congue orci, a imperdiet neque enim ut dui. Praesent commodo orci bibendum leo suscipit viverra. Nunc fermentum semper eleifend. Pellentesque suscipit nulla aliquet, egestas lectus sed, egestas dui. Vivamus scelerisque maximus nibh, ac dignissim nunc tempor a. Praesent facilisis non lacus et aliquam. Proin ultricies lacus vitae nibh ullamcorper gravida. Proin elit arcu, convallis eget posuere quis, placerat id augue. Fusce ex risus, tempus nec orci vitae, feugiat faucibus quam. Integer risus metus, ornare et rhoncus vitae, accumsan a urna.
</p>

<nav><div id="angkor"></div>The angkor</nav>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nec lacus vel eros rutrum volutpat. Cras ultrices enim sit amet odio dictum, eget consectetur mi pellentesque. Sed mollis gravida nulla, eu euismod turpis efficitur id. Integer pretium posuere fringilla. Aenean laoreet, augue non pharetra elementum, lectus massa congue orci, a imperdiet neque enim ut dui. Praesent commodo orci bibendum leo suscipit viverra. Nunc fermentum semper eleifend. Pellentesque suscipit nulla aliquet, egestas lectus sed, egestas dui. Vivamus scelerisque maximus nibh, ac dignissim nunc tempor a. Praesent facilisis non lacus et aliquam. Proin ultricies lacus vitae nibh ullamcorper gravida. Proin elit arcu, convallis eget posuere quis, placerat id augue. Fusce ex risus, tempus nec orci vitae, feugiat faucibus quam. Integer risus metus, ornare et rhoncus vitae, accumsan a urna.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nec lacus vel eros rutrum volutpat. Cras ultrices enim sit amet odio dictum, eget consectetur mi pellentesque. Sed mollis gravida nulla, eu euismod turpis efficitur id. Integer pretium posuere fringilla. Aenean laoreet, augue non pharetra elementum, lectus massa congue orci, a imperdiet neque enim ut dui. Praesent commodo orci bibendum leo suscipit viverra. Nunc fermentum semper eleifend. Pellentesque suscipit nulla aliquet, egestas lectus sed, egestas dui. Vivamus scelerisque maximus nibh, ac dignissim nunc tempor a. Praesent facilisis non lacus et aliquam. Proin ultricies lacus vitae nibh ullamcorper gravida. Proin elit arcu, convallis eget posuere quis, placerat id augue. Fusce ex risus, tempus nec orci vitae, feugiat faucibus quam. Integer risus metus, ornare et rhoncus vitae, accumsan a urna.

</p>

ฉันประสบปัญหาที่คล้ายกันนี้และฉันแก้ไขโดยใช้รหัสต่อไปนี้

$(document).on('click', 'a.page-scroll', function(event) {
        var $anchor = $(this);
        var desiredHeight = $(window).height() - 577;
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top - desiredHeight
        }, 1500, 'easeInOutExpo');
        event.preventDefault();
    });

<a href="#anchor">Click me!</a>

<div style="margin-top: -100px; padding-top: 100px;" id="anchor"></div>
<p>I should be 100px below where I currently am!</p>