html - verweise - navbar hides initial content when jumping to in page anchor




Feste Seitenüberschriften überlappen In-Page-Anker (17)

Wenn ich einen Header ohne Bildlauf in einer HTML-Seite habe, der oben fixiert ist und eine definierte Höhe hat:

Gibt es eine Möglichkeit, den URL-Anker (den #fragment Teil) zu verwenden, damit der Browser zu einem bestimmten Punkt auf der Seite #fragment , aber trotzdem die Höhe des fixierten Elements ohne die Hilfe von JavaScript respektiert?

http://foo.com/#bar
WRONG (but the common behavior):         CORRECT:
+---------------------------------+      +---------------------------------+
| BAR///////////////////// header |      | //////////////////////// header |
+---------------------------------+      +---------------------------------+
| Here is the rest of the Text    |      | BAR                             |
| ...                             |      |                                 |
| ...                             |      | Here is the rest of the Text    |
| ...                             |      | ...                             |
+---------------------------------+      +---------------------------------+

CSS-Trick wird eine Problemumgehung sein. Eine geeignete Lösung, die in jedem Szenario funktioniert, kann mit jQuery implementiert werden.

Siehe https://codepen.io/pikeshmn/pen/mMxEdZ

Ansatz: Mit document.getElementById ('header') erhalten wir die Höhe des festen Nav . OffsetHeight Versetzt den Scroll auf diesen Wert.

var jump=function(e){  

e.preventDefault();                        //prevent "hard" jump
  var target = $(this).attr("href");       //get the target

      //perform animated scrolling
      $('html,body').animate(
        {
          scrollTop: $(target).offset().top - document.getElementById('header').offsetHeight - 5  //get top-position of target-element and set it as scroll target
        },1000,function()                  //scrolldelay: 1 seconds
        {
          location.hash = target;          //attach the hash (#jumptarget) to the pageurl
        });
      }

  $(document).ready(function()
  {
    $('a[href*="#"]').bind("click", jump); //get all hrefs
    return false;
  });

PS:

  • Es beinhaltet einen Unterschied von 5 Pixeln zwischen Header und Ziel
  • Scroll-Effekt ist nicht schwer, eher glatt; Flüssiges Scrollen

Der beste Weg, um dieses Problem zu lösen, ist (ersetzen Sie 65px durch Ihre feste Elementhöhe):

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

Wenn Sie den Zielselektor nicht verwenden möchten, können Sie dies auch folgendermaßen tun:

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

Hinweis: Dieses Beispiel funktioniert nicht, wenn das Zielelement eine Backgound-Farbe hat, die sich von seinem Elternteil unterscheidet. beispielsweise:

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

In diesem Fall überschreibt die grüne Farbe des my-target-Elements sein übergeordnetes rotes Element in 65px. Ich habe für dieses Problem keine reine CSS-Lösung gefunden, aber wenn Sie keine andere Hintergrundfarbe haben, ist diese Lösung die beste Lösung.


Du könntest das versuchen:

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

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

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

Setzen Sie den oberen Füllwert auf die tatsächliche Höhe Ihrer Kopfzeile. Dadurch wird am oberen Rand der Kopfzeile eine kleine zusätzliche Lücke eingefügt, die jedoch nur sichtbar ist, wenn der Benutzer zum Anker springt und dann nach oben scrollt. Ich habe diese Lösung für meine Website jetzt erfunden, aber es zeigt nur einen kleinen festen Balken oben auf der Seite, nichts zu hoch.


Ein minimal intrusiver Ansatz mit jQuery:

Verknüpfung:

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

Inhalt:

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

Skript:

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

Durch Zuweisen der Ankerverbindungsklasse zu den Verknüpfungen wird das Verhalten anderer Verknüpfungen (wie Akkordeon- oder Registersteuerelemente) nicht beeinflusst.

Die Frage will Javascript nicht, aber die andere populäre Frage ist wegen diesem geschlossen, und ich konnte dort nicht antworten.


Es fühlt sich etwas hacky für meinen puristischen Verstand an, aber als css-only-Lösung können Sie das aktive verankerte Element mit dem :target Selektor umfüllen:

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>


Fügen Sie eine Klasse mit einem "paddingtop" hinzu, damit es funktioniert;)

<h1><a class="paddingtop">Bar</a></h1>

Und für CSS hast du:

    .paddingtop{ 
       padding-top: 90px; 
     }

Für mich geht das:

HTML LINK zum Anker:

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

HTML-Anker:

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

CSS:

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

Hier ist eine komplette Jquery-Lösung, die in IE funktioniert:

Angenommen, die Navigationsleistenelemente sind in etwa so:

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

Sie können das folgende jquery-Snippet verwenden, um den Bildlauf zu versetzen:

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

    });
}

Ich benutze diese Methode, weil aus irgendeinem Grund keine der anderen vorgeschlagenen Lösungen tatsächlich für mich funktionierte. Ich verspreche, ich habe es versucht.

section {
   position: relative;
   border-top: 52px solid transparent; /* navbar height +2 */
   margin: -30px 0 0;
   -webkit-background-clip: padding-box;
   -moz-background-clip: padding;
   background-clip: padding-box;
}

section:before {
   content: "";
   position: absolute;
   top: -2px;
   left: 0;
   right: 0;
   border-top: 2px solid transparent;
}

Ersetzen Sie Abschnitt durch eine Klasse, wenn Sie bevorzugen.

Quelle: http://nicolasgallagher.com/jump-links-and-viewport-positioning/

  • Getestet auf Firefox 45 und Chrome 52.
  • Bootstrap-Version: 3.3.7

Für diejenigen, die mir nicht glauben, bereitete ich freundlicherweise die Lösung vor: SOLUTION


Ich benutze diesen Ansatz:

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

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

Es fügt ein unsichtbares Element vor jedem Ziel hinzu. Es funktioniert IE8 +.

Hier sind weitere Lösungen: http://nicolasgallagher.com/jump-links-and-viewport-positioning/


Ich hatte das gleiche Problem. Ich löste es, indem ich dem Ankerelement eine Klasse hinzufügte, wobei die Höhe des oberen Balkens der Wert für den Füllgrad war.

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

Und dann einfach das CSS:

.anchor { padding-top: 90px; }

Ich musste feststellen, dass ich sowohl MutttenXds als auch Badabams CSS - Lösungen verwenden musste, da die erste nicht in Chrome funktionierte und die zweite nicht in Firefox funktionierte:

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

Sie können dies mit jQuery tun:

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

So habe ich es geschafft, endlich an den richtigen Ort zu gehen, wenn Sie auf die Navigation klicken. Ich habe einen Event-Handler für die Navigationsklicks hinzugefügt. Dann können Sie einfach "scrollBy" verwenden, um den Offset nach oben zu verschieben.

var offset = 90;

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

Wenn Sie keine neue Klasse in css festlegen können oder wollen:

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

oder jQuery:

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

Official Bootstrap Adopted Antwort:

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

Credits

Merge


// handle hashes when page loads
// <http://.com/a/29853395>
function adjustAnchor() {
  const $anchor = $(':target');
  const fixedElementHeight = $('.navbar-fixed-top').outerHeight();
  if ($anchor.length > 0)
    window.scrollTo(0, $anchor.offset().top - fixedElementHeight);
}
$(window).on('hashchange load', adjustAnchor);
$('body').on('click', "a[href^='#']", function (ev) {
  if (window.location.hash === $(this).attr('href')) {
    ev.preventDefault();
    adjustAnchor();
  }
});






fragment