Pertanyaan mengimbangi jangkar html untuk menyesuaikan header tetap [duplikat]


Pertanyaan ini sudah memiliki jawaban di sini:

Saya mencoba membersihkan cara kerja jangkar saya. Saya memiliki header yang tetap di bagian atas halaman, jadi ketika Anda menghubungkan ke anchor di tempat lain di halaman, halaman melompat sehingga anchor berada di bagian atas halaman, meninggalkan konten di belakang header tetap (saya harap itu masuk akal). Saya perlu cara untuk mengimbangi jangkar oleh 25px dari ketinggian header. Saya lebih suka HTML atau CSS, tetapi Javascript akan diterima juga.


854
2018-05-24 07:04


asal


Jawaban:


Anda bisa menggunakan CSS tanpa javascript.

Berikan jangkar Anda sebuah kelas:

<a class="anchor" id="top"></a>

Anda kemudian dapat memposisikan anchor offset lebih tinggi atau lebih rendah daripada di mana ia benar-benar muncul di halaman, dengan membuatnya menjadi elemen blok dan relatif memposisikannya. -250px akan memposisikan jangkar ke atas 250px

a.anchor {
    display: block;
    position: relative;
    top: -250px;
    visibility: hidden;
}

940
2017-11-01 20:09



Saya menemukan solusi ini:

<a name="myanchor">
    <h1 style="padding-top: 40px; margin-top: -40px;">My anchor</h1>
</a>

Ini tidak membuat celah dalam konten dan tautan tautan bekerja sangat bagus.


279
2017-08-07 09:22



Saya mencari solusi untuk ini juga. Dalam kasus saya itu cukup mudah.

Saya memiliki daftar menu dengan semua tautan:

<ul>
<li><a href="#one">one</a></li>
<li><a href="#two">two</a></li>
<li><a href="#three">three</a></li>
<li><a href="#four">four</a></li>
</ul>

Dan di bawah bahwa judul di mana ia harus pergi.

<h3>one</h3>
<p>text here</p>

<h3>two</h3>
<p>text here</p>

<h3>three</h3>
<p>text here</p>

<h3>four</h3>
<p>text here</p>

Sekarang karena saya memiliki menu tetap di bagian atas halaman saya, saya tidak bisa hanya pergi ke tag saya karena itu akan berada di belakang menu.

Sebaliknya saya meletakkan tag span di dalam tag saya dengan id yang tepat.

<h3><span id="one"></span>one</h3>

Sekarang gunakan 2 baris css untuk memposisikannya dengan benar.

h3{ position:relative; }
h3 span{ position:absolute; top:-200px;}

Ubah nilai teratas agar sesuai dengan tinggi header tetap Anda (atau lebih). Sekarang saya menganggap ini akan bekerja dengan elemen lain juga.


129
2017-10-30 11:56



Karena ini adalah masalah presentasi, solusi CSS murni akan ideal. Namun, pertanyaan ini diajukan pada tahun 2012, dan meskipun solusi positioning / margin negatif relatif telah disarankan, pendekatan ini tampaknya agak bersifat hacky, menciptakan masalah aliran potensial, dan tidak dapat merespon secara dinamis terhadap perubahan di DOM / viewport.

Dengan itu dalam pikiran saya percaya bahwa menggunakan JavaScript masih (Februari 2017) pendekatan terbaik. Di bawah ini adalah solusi vanilla-JS yang akan merespon baik untuk klik jangkar dan menyelesaikan halaman hash pada beban (Lihat JSFiddle). Ubah .getFixedOffset() metode jika perhitungan dinamis diperlukan. Jika Anda menggunakan jQuery, inilah solusi yang dimodifikasi dengan delegasi acara yang lebih baik dan pengguliran yang mulus.

(function(document, history, location) {
  var HISTORY_SUPPORT = !!(history && history.pushState);

  var anchorScrolls = {
    ANCHOR_REGEX: /^#[^ ]+$/,
    OFFSET_HEIGHT_PX: 50,

    /**
     * Establish events, and fix initial scroll position if a hash is provided.
     */
    init: function() {
      this.scrollToCurrent();
      window.addEventListener('hashchange', this.scrollToCurrent.bind(this));
      document.body.addEventListener('click', this.delegateAnchors.bind(this));
    },

    /**
     * Return the offset amount to deduct from the normal scroll position.
     * Modify as appropriate to allow for dynamic calculations
     */
    getFixedOffset: function() {
      return this.OFFSET_HEIGHT_PX;
    },

    /**
     * If the provided href is an anchor which resolves to an element on the
     * page, scroll to it.
     * @param  {String} href
     * @return {Boolean} - Was the href an anchor.
     */
    scrollIfAnchor: function(href, pushToHistory) {
      var match, rect, anchorOffset;

      if(!this.ANCHOR_REGEX.test(href)) {
        return false;
      }

      match = document.getElementById(href.slice(1));

      if(match) {
        rect = match.getBoundingClientRect();
        anchorOffset = window.pageYOffset + rect.top - this.getFixedOffset();
        window.scrollTo(window.pageXOffset, anchorOffset);

        // Add the state to history as-per normal anchor links
        if(HISTORY_SUPPORT && pushToHistory) {
          history.pushState({}, document.title, location.pathname + href);
        }
      }

      return !!match;
    },

    /**
     * Attempt to scroll to the current location's hash.
     */
    scrollToCurrent: function() {
      this.scrollIfAnchor(window.location.hash);
    },

    /**
     * If the click event's target was an anchor, fix the scroll position.
     */
    delegateAnchors: function(e) {
      var elem = e.target;

      if(
        elem.nodeName === 'A' &&
        this.scrollIfAnchor(elem.getAttribute('href'), true)
      ) {
        e.preventDefault();
      }
    }
  };

  window.addEventListener(
    'DOMContentLoaded', anchorScrolls.init.bind(anchorScrolls)
  );
})(window.document, window.history, window.location);

129
2017-10-25 10:53



Solusi css murni yang terinspirasi oleh Alexander Savin:

a[name] {
  padding-top: 40px;
  margin-top: -40px;
  display: inline-block; /* required for webkit browsers */
}

Opsional Anda mungkin ingin menambahkan yang berikut jika target masih di luar layar:

  vertical-align: top;

79
2017-12-14 15:45



FWIW ini berhasil untuk saya:

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

74
2018-06-19 03:44



Saya telah menghadapi masalah serupa, sayangnya setelah menerapkan semua solusi di atas, saya sampai pada kesimpulan berikut.

  1. Elemen batin saya memiliki struktur CSS yang rapuh dan menerapkan posisi relatif / bermain mutlak, benar-benar melanggar desain halaman.
  2. CSS bukan baju kuat saya.

Saya menulis ini gulir js sederhana, yang menyumbang offset disebabkan karena header dan merelokasi div sekitar 125 piksel di bawah ini. Silakan gunakan sesuai keinginan Anda.

HTML

<div id="#anchor"></div> <!-- #anchor here is the anchor tag which is on your URL -->

JavaScript

 $(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
&& location.hostname == this.hostname) {

      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top - 125 //offsets for fixed header
        }, 1000);
        return false;
      }
    }
  });
  //Executed on page load with URL containing an anchor tag.
  if($(location.href.split("#")[1])) {
      var target = $('#'+location.href.split("#")[1]);
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top - 125 //offset height of header here too.
        }, 1000);
        return false;
      }
    }
});

Melihat sebuah implementasi langsung di sini.


28
2017-12-02 04:33



Anda dapat melakukannya tanpa js dan tanpa mengubah html. Ini hanya untuk CSS.

a[id]:before {
    content:"";
    display:block;
    height:50px;
    margin:-30px 0 0;
}

Itu akan menambahkan elemen pseudo sebelum setiap tag dengan id. Sesuaikan nilai agar sesuai dengan ketinggian header Anda.


26
2018-06-25 17:04



Ini mengambil banyak elemen dari jawaban sebelumnya dan menggabungkannya menjadi fungsi jQuery anonim (194 bytes minified) anonim. Menyesuaikan fixedElementHeight untuk ketinggian menu atau elemen pencekalan Anda.

    (function($, window) {
        var adjustAnchor = function() {

            var $anchor = $(':target'),
                    fixedElementHeight = 100;

            if ($anchor.length > 0) {

                $('html, body')
                    .stop()
                    .animate({
                        scrollTop: $anchor.offset().top - fixedElementHeight
                    }, 200);

            }

        };

        $(window).on('hashchange load', function() {
            adjustAnchor();
        });

    })(jQuery, window);

Jika Anda tidak suka animasi, ganti

$('html, body')
     .stop()
     .animate({
         scrollTop: $anchor.offset().top - fixedElementHeight
     }, 200);

dengan:

window.scrollTo(0, $anchor.offset().top - fixedElementHeight);

Versi Uglified:

 !function(o,n){var t=function(){var n=o(":target"),t=100;n.length>0&&o("html, body").stop().animate({scrollTop:n.offset().top-t},200)};o(n).on("hashchange load",function(){t()})}(jQuery,window);

26
2018-04-24 17:02



Untuk browser modern, cukup tambahkan CSS3: pemilih target ke halaman. Ini akan berlaku untuk semua jangkar secara otomatis.

:target {
    display: block;    
    position: relative;     
    top: -100px;
    visibility: hidden;
}

24
2018-02-11 16:13