Buat tautan jangkar menjadi beberapa piksel di atas tempat tautan itu ditautkan

Saya tidak yakin cara terbaik untuk menanyakan / mencari pertanyaan ini:

Saat Anda mengklik tautan jangkar, ini membawa Anda ke bagian halaman dengan area tertaut ke sekarang di SANGAT ATAS halaman. Saya ingin tautan jangkar mengirim saya ke bagian halaman itu, tetapi saya ingin beberapa ruang di bagian atas. Seperti di, saya tidak ingin itu mengirim saya ke bagian yang ditautkan dengannya di SANGAT TOP, saya ingin 100 atau lebih piksel ruang di sana.

Apakah ini masuk akal? Apakah ini mungkin?

Diedit untuk menampilkan kode - itu hanya tag jangkar:

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

Ini akan memungkinkan browser melakukan pekerjaan melompat ke jangkar untuk kita dan kemudian kita akan menggunakan posisi itu untuk mengimbangi.

EDIT 1:

Seperti yang ditunjukkan oleh @erb, ini hanya berfungsi jika Anda berada di halaman saat hash diubah. Memasuki halaman dengan yang #somethingsudah ada di URL tidak bekerja dengan kode di atas. Berikut adalah versi lain untuk mengatasinya:

// 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).

CATATAN: Untuk menggunakan jQuery, Anda bisa mengganti window.addEventListenerdengan $(window).ondalam contoh. Terima kasih @Neon.

EDIT 2:

Seperti yang ditunjukkan oleh beberapa orang, hal di atas akan gagal jika Anda mengklik tautan jangkar yang sama dua kali atau lebih berturut-turut karena tidak ada hashchangeperistiwa untuk memaksa pengimbangan.

Solusi ini adalah versi yang sedikit dimodifikasi dari saran dari @Mave dan menggunakan pemilih jQuery untuk kesederhanaan

// 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 untuk contoh ini ada di sini

Bekerja hanya dengan css Anda dapat menambahkan padding ke elemen berlabuh (seperti dalam solusi di atas) Untuk menghindari spasi kosong yang tidak perlu Anda dapat menambahkan margin negatif dengan tinggi yang sama:

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

Saya tidak yakin apakah ini adalah solusi terbaik dalam hal apa pun, tetapi berfungsi dengan baik untuk saya.

Solusi yang lebih baik:

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

Posisikan saja <a>tag dengan pemosisian absolut di dalam objek yang posisinya relatif.

Berfungsi saat memasuki halaman atau melalui perubahan hash dalam halaman.

Inilah jawaban tahun 2020 untuk ini:

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

Karena itu didukung secara luas !

Solusi terbaik

<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>

Ini akan bekerja tanpa jQuery dan saat memuat halaman.

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

Untuk menautkan ke sebuah elemen, dan kemudian 'memposisikan' elemen itu pada jarak yang sewenang-wenang dari bagian atas halaman, menggunakan CSS murni, Anda harus menggunakan padding-top, dengan cara itu elemen masih diposisikan di bagian atas jendela, tetapi itu muncul , tampak, untuk diposisikan agak jauh dari atas port tampilan, misalnya:

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

Demo JS Fiddle .

Untuk menggunakan pendekatan JavaScript biasa:

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

window.addEventListener('hashchange', addMargin);

Demo JS Fiddle .

Ini harus bekerja:

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

Ubah saja .top-49 menjadi yang sesuai dengan tautan jangkar Anda.

Jika Anda menggunakan nama jangkar eksplisit seperti,

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

lalu di css Anda cukup mengaturnya

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

Ini akan bekerja selama tag anchor HREF Anda tidak juga menentukan atribut NAME

Jawaban Eric bagus, tetapi Anda benar-benar tidak membutuhkan waktu tunggu itu. Jika Anda menggunakan jQuery, Anda tinggal menunggu halaman dimuat. Jadi saya sarankan untuk mengubah kode menjadi:

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

Ini juga membuat kita menyingkirkan faktor sembarangan itu.

coba kode ini, sudah animasi yang mulus saat mengklik link.

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

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

Solusi termudah:

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>

Varian solusi Thomas: elemen CSS > pemilih elemen dapat digunakan di sini:

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>

Sebuah klik pada link akan memindahkan posisi scroll ke 100px di atas dimanapun elemen dengan kelas paddedAnchordiposisikan.

Didukung di browser non-IE, dan di IE dari versi 9. Untuk dukungan pada IE 7 dan 8, a <!DOCTYPE>harus diumumkan.

Saya baru saja menemukan solusi mudah untuk diri saya sendiri. Memiliki margin-top 15px

HTML

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

CSS

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

Hanya menggunakan css dan tidak memiliki masalah dengan konten yang tertutup dan tidak dapat diklik sebelumnya (intinya adalah pointer-events: none):

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>

Taruh ini dengan gaya:

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

dan gunakan kelas ini dalam divtag terpisah sebelum tautan, contoh:

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

atau gunakan kode php ini untuk tag tautan gema:

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

Saya tahu ini agak terlambat, tetapi saya menemukan sesuatu yang sangat penting untuk dimasukkan ke dalam kode Anda jika Anda menggunakan Scrollspy Bootstrap. ( http://getbootstrap.com/javascript/#scrollspy )

Ini membuatku gila selama berjam-jam.

Offset untuk mata-mata gulir HARUS cocok dengan window.scrollY atau Anda akan menjalankan risiko:

1. Mendapatkan efek flicker aneh saat di-scroll
2. Anda akan menemukan bahwa ketika Anda mengklik jangkar, Anda akan mendarat di bagian itu, tetapi mata-mata gulir akan menganggap Anda adalah bagian di atasnya.

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

Berdasarkan solusi @Eric Olson cukup modifikasi sedikit untuk memasukkan elemen jangkar yang ingin saya tuju secara khusus

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

Saya hanya memiliki masalah yang sama. Saya memiliki nav posited pixed dan saya ingin angkor mulai di bawah nav. Solusi window.addEventListener...tidak berhasil untuk saya karena saya mengatur halaman saya menjadi scroll-behavior:smoothjadi itu mengatur offset bukan gulir ke angkor. yang setTimeout()bekerja jika waktu yang anough untuk gulir sampai akhir tetapi masih tidak terlihat baik. jadi solusi saya adalah menambahkan div absolut yang ditempatkan di angkor, dengan height:[the height of the nav]dan bottom:100%. dalam hal ini div ini berakhir di bagian atas elemen angkor, dan mulai dari posisi di mana Anda ingin menggulir angkor. sekarang yang saya lakukan hanyalah mengatur tautan angkor ke div absolut ini dan selesai :)

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>

saya menghadapi masalah serupa dan saya menyelesaikannya dengan menggunakan kode berikut

$(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>