it-swarm.com.de

Feste Seitenkopfüberlappungen in-Page-Ankern behoben

Wenn ich eine nicht scrollbare Kopfzeile in einer HTML-Seite habe, die oben fixiert ist und eine definierte Höhe hat:

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

http://foo.com/#bar
 FALSCH (aber das allgemeine Verhalten): RICHTIG: 
 + ------------------------------- + + ----------------------------- + 
 | BAR ///////////////////// header | | //////////////////////// header | 
 + -------------------- ------------- + + --------------------------------- +
 | Hier ist der Rest des Textes | | BAR | 
 | ... | | | 
 | ... | | Hier ist der Rest des Textes | 
 | ... | | ... | 
 + ----------------------------- + + ------- -------------------------- + 
256
Tomalak

Ich hatte das gleiche Problem ... Ich habe es gelöst, indem ich dem Ankerelement eine Klasse mit der Topbar-Höhe als Padding-Top-Wert hinzugefügt habe.

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

Und dann einfach die CSS:

.anchor { padding-top: 90px; }
124
MutttenXd

Wenn Sie keine neue Klasse festlegen können oder wollen, fügen Sie ein ::before pseudo-Element zur :target pseudo-Klasse in CSS hinzu:

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

Oder scrollen Sie die Seite relativ zu :target mit jQuery:

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

Ich verwende 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 vor jedem Ziel ein unsichtbares Element hinzu. Es funktioniert IE8 +.

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

112
Jerry

Offizieller Bootstrap angenommen Antwort:

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

Credits

Zusammenführen

32
blnc

Der beste Weg, den ich für dieses Problem gefunden habe, ist (ersetzen Sie 65px durch Ihre feste Elementhöhe):

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

Wenn Sie den Selector target 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 Hintergrundfarbe hat, die sich von seinem übergeordneten Element unterscheidet. Beispiel:

<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 Elements my-target sein übergeordnetes rotes Element in 65px .. __ Ich habe keine reine CSS-Lösung gefunden, um dieses Problem zu lösen, aber wenn Sie keine andere Hintergrundfarbe haben, ist diese Lösung die beste.

25
Roy Shoa

Während einige der vorgeschlagenen Lösungen für Fragment-Links (= Hash-Links) innerhalb derselben Seite funktionieren (wie ein Menü-Link, der nach unten scrollen kann), habe ich festgestellt, dass keine von ihnen im aktuellen Chrome funktioniert, wenn Sie Fragment-Links verwenden möchten kommen in von anderen Seiten

Wenn Sie also www.mydomain.com/page.html#foo von Grund auf neu starten, wird NOT Ihr Ziel im aktuellen Chrome mit einer der angegebenen CSS-Lösungen oder JS-Lösungen ausgleichen.

Es gibt auch einen jQuery-Fehlerbericht , der einige Details des Problems beschreibt.

L&OUML;SUNG

Die einzige Option, die ich bisher in Chrome gefunden habe, ist JavaScript, das nicht onDomReady genannt wird, sondern mit einer Verzögerung.

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

ZUSAMMENFASSUNG 

Ohne JS Delay-Lösungen funktionieren wahrscheinlich Firefox, IE, Safari, aber nicht Chrome.

12
Jpsy

Für Chrome/Safari/Firefox können Sie einen display: block hinzufügen und einen negativen Rand verwenden, um den Versatz auszugleichen.

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

Siehe Beispiel http://codepen.io/swed/pen/RrZBJo

8
MrSwed

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);
6
webvitaly

Für mich geht das:

HTML LINK zu 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;
}
5
avila

Sie könnten dies versuchen:

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

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

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

Stellen Sie den oberen Auffüllwert auf die tatsächliche Höhe Ihrer Kopfzeile ein. Dies führt zu einer geringfügigen zusätzlichen Lücke oben in der Kopfzeile. Sie wird jedoch nur sichtbar, wenn der Benutzer zum Anker springt und dann nach oben scrollen kann. Ich habe diese Lösung gerade für meine Website entwickelt, aber sie zeigt nur eine kleine feste Leiste oben auf der Seite, nichts zu hoch.

4
ygoe

Ich habe es leicht mit CSS und HTML zu arbeiten, mit der oben genannten "Anker: vorher" -Methode. Ich denke, es funktioniert am besten, weil es keine massive Polsterung zwischen den Divs erzeugt.

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

Es scheint nicht für das erste Div auf der Seite zu funktionieren, aber Sie können dem entgegenwirken, indem Sie dem ersten Div einen Abstand hinzufügen.

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

Hier ist eine funktionierende Geige: http://jsfiddle.net/FRpHE/24/

4
Eric Wood

Ich verwende die Antwort von @ Jpsy, aber aus Leistungsgründen setze ich den Timer nur, wenn der Hash in der URL vorhanden ist.

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

Ich fand, dass ich beide MutttenXd und Badabam 's CSS-Lösungen zusammen verwenden musste, da die erste in Chrome nicht funktionierte und die zweite in Firefox nicht 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>
...
3
tshalif

Die sauberste Art finde ich folgendermaßen:

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

Ich hatte viele Probleme mit vielen Antworten hier und anderswo, da meine mit einem Lesezeichen versehenen Anker auf einer FAQ -Seite Abschnittsheader waren. Das Versetzen der Kopfzeile half also nicht, da der Rest des Inhalts einfach dort blieb, wo er war . Also dachte ich, ich würde posten.

Am Ende habe ich einige Lösungen zusammengestellt:

  1. Das CSS:

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

Dabei ist "120px" Ihre feste Kopfhöhe (möglicherweise plus etwas Spielraum).

  1. Der Lesezeichen-Link HTML:

    <a href="#01">What is your FAQ question again?</a>
    
  2. Der mit Lesezeichen versehene Inhalt 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>
    

Das Gute an dieser Lösung ist, dass das span-Element nicht nur ausgeblendet ist, sondern im Wesentlichen reduziert ist und Ihren Inhalt nicht auffüllt.

Ich kann dieser Lösung nicht viel Ehre machen, da sie aus verschiedenen Ressourcen stammt, aber in meiner Situation hat sie am besten funktioniert.

Sie können das tatsächliche Ergebnis hier sehen.

3
SteveCinq

Für meinen puristischen Geist fühlt es sich etwas hackig an, aber als reine Css-Lösung können Sie dem aktiven verankerten Element mit dem :target-Selektor eine Auffüllung hinzufügen:

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>

3
Moob

Ich brauchte etwas, das für eingehende Links, Links auf der Seite und das von JS als Ziel ausgewählt werden kann, damit die Seite auf Änderungen in der Kopfzeilenhöhe reagieren kann

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

Mit dem z-index: -1 können Links im 'Auffüllbereich' über einem Fragment-Target weiterhin angeklickt werden, wie von @MuttenXd zu seiner Antwort kommentiert

Ich habe noch kein Problem in IE 11, Edge 15+, Chrome 38+, FF 52+ oder Safari 9.1+ gefunden

2
Arth

Ein minimal aufdringlicher 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 das Zuweisen der Anker-Link-Klasse zu den Links wird das Verhalten anderer Links (z. B. Akkordeon- oder Tab-Steuerelemente) nicht beeinflusst.

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

2

Ich habe ein Div mit ein paar Zeilenumbrüchen erstellt und diese mit der ID angegeben. Dann habe ich den Code eingefügt, den ich anzeigen wollte. Der Link würde Sie dann zum Platz über dem Bild bringen und die Kopfzeile steht nicht mehr im Weg:

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

Natürlich können Sie die Anzahl der Zeilenumbrüche an Ihre Bedürfnisse anpassen. Dies funktionierte perfekt für mich. Ich bin mir nicht sicher, ob es Probleme gibt, ich lerne immer noch HTML.

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

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

1

Die Implementierung mit :before hat gut funktioniert, bis wir erkannt haben, dass das Pseudoelement tatsächlich Zeigerereignisse abdeckt und blockiert, die in innerhalb des Bereichs des Pseudoelements liegen. Die Verwendung von pointer-events: none auf dem :before oder sogar direkt auf dem Anker hatte keine Auswirkung.

Am Ende machten wir die Positionierung des Ankers absolut und stellten sie dann auf die Versetzung/Höhe des festen Bereichs ein.

Versatzanker ohne Blockereignisse zu blockieren

.section-marker {

    position: absolute;
    top: -300px;
}

Der Wert dabei ist, dass wir keine Elemente blockieren, die unter diese 300px fallen könnten. Der Nachteil ist, dass die Position dieses Elements von Javascript berücksichtigt werden muss, um den Versatz zu berücksichtigen, sodass die Logik dort angepasst werden musste. 

1
skabob11

So habe ich es geschafft, endlich an die richtige Stelle zu gelangen, wenn Sie auf die Navigation klicken. Ich habe einen Event-Handler für die Navigationsklicks hinzugefügt. Dann können Sie einfach mit "scrollBy" den Versatz nach oben verschieben.

var offset = 90;

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

Verwendete dieses Skript

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

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

Sobald CSS Scroll Snap spec ins Spiel kommt, ist dies mit der Eigenschaft scroll-margin-top problemlos möglich. Läuft derzeit auf Chrome und Opera (April 2019). Auch Safari 11+ sollte dies unterstützen, aber ich konnte es nicht auf Safari 11 ausführen. Wahrscheinlich müssen wir darauf warten, dass Jungs es irgendwo reparieren.

Codepen Beispiel

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

Hier ist eine vollständige Jquery-Lösung, die in IE funktionieren wird:

Angenommen, die Navigationsleistenelemente sehen etwa so aus:

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

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

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

Dieser Code sollte den Trick tun. Tauschen Sie 45px für die Höhe Ihrer Kopfleiste aus.

BEARBEITEN: Wenn die Verwendung von jQuery eine Option ist, war es auch erfolgreich, jQuery.localScroll mit einem Versatzwertsatz zu verwenden. Die Offset-Option ist Teil von jQuery.scrollTo, auf dem jQuery.localScroll basiert. Eine Demo ist hier verfügbar: http://demos.flesler.com/jquery/scrollTo/ (zweites Fenster, unter 'offset')

1
fourk

Füge eine Klasse mit einem "Paddingtop" hinzu, damit es funktioniert;)

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

Und für CSS haben Sie:

    .paddingtop{ 
       padding-top: 90px; 
     }
0
Marcel1997
// handle hashes when page loads
// <http://stackoverflow.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();
  }
});
0
niftylettuce

Eine sehr einfache CSS-Antwort besteht darin, dies oben in Ihrem Stylesheet anzuordnen:

a{padding-top: 90px;}
a:link{padding-top: unset;}

Der erste Stil regelt alle Ankertags, bei denen der zweite Stil Tags mit einem Hyperlink verknüpft. 

Hinweis: Dies funktioniert derzeit in Firefox und Edge, aber auch nicht in Chrome.

0
D. Stewart

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

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 section durch eine Klasse, wenn Sie möchten.

quelle: Sprunglinks und Positionieren von Ansichtsfenstern

  • Getestet mit Firefox 45 und Chrome 52.
  • bootstrap-Version: 3.3.7

Für diejenigen, die mir nicht glauben, bereitete ich freundlicherweise eine jsfiddle mit der Lösung vor: L&OUML;SUNG

0
scavenger

Ich hatte kein Glück mit der Antwort, die ich oben aufgeführt habe, und habe diese Lösung verwendet, die perfekt funktioniert hat ...

Erstellen Sie ein leeres Feld, an dem Sie Ihren Anker setzen möchten. 

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

Und wende folgende Klasse an:

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

Diese Lösung funktioniert auch, wenn die Abschnitte farblich hinterlegt sind! Ich fand die Lösung unter diesem Link.

0
Matt Underwood

Der CSS-Trick wird eine Problemumgehung sein. Mit jQuery kann eine geeignete Lösung implementiert werden, die in allen Szenarien funktioniert.

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

Approach: Wir erhalten die Höhe der festen Navigation mit document.getElementById ('header'). OffsetHeight.__ und verschieben den Bildlauf 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;
  });

P.S: 

  • Es enthält einen Unterschied von 5 Pixeln zwischen Kopf und Ziel
  • Der Scroll-Effekt ist nicht schwer, sondern eher glatt. Flüssiges Scrollen
0
Pikesh Prasoon