CSS make Link zu verankern 100px unteren

Hallo Freunde gehe ich einen Link zu einem Anker in meinem html habenCSS make Link zu verankern 100px unteren

<a href="#anchor">anchor</a>

Und das geht zu einem div in meinem html

<div id="anchor" class="container-full"> 
</div>

Meine Ziele ist es, lass es einen 100px tiefer scrollen, das habe ich mit css versucht aber leider passiert nichts.

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

EDIT hinzugefügt js

jQuery(".nav li a").click(function(e) { 
     e.preventDefault(); 
     $id = jQuery(this).attr("data-id"); 
     jQuery("a.clicked").removeClass("clicked"); 
     jQuery(this).addClass("clicked"); 
     jQuery('html, body').animate({ 
      scrollTop: jQuery("#"+$id).offset().top 
     }, 1000); 
});

Quelle

2016-04-27 Frank Lucas

Ist das ein Tippfehler? 'href =" # anchor "' geht nicht zu 'id =" wie "' – putvande

@putvande ah ja ich habe falsches div kopiert Ich habe OP bearbeitet –

Mögliche Duplikate - http://stackoverflow.com/questions/4086107/html- positionfixed-page-header-and-in-page-anchors –

Da Sie bereits jQuery verwenden, um Ihre Scrollen zu behandeln, versuchen Sie, 100 zu Ihrem Offset, wenn Ihre scrollTop-Eigenschaft, die Ihre Rolle im Verhalten führen sollte gehen 100px vorbei an der Lage des Zielelements in Ihrem animate() Aufruf:

jQuery('html, body').animate({ 
     scrollTop: jQuery("#"+$id).offset().top + 100 // scroll 100px past the element 
}, 1000);

Beispiel Snippet

.space { height: 500px; }

<!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-2.1.4.js"></script> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <a href="#anchor" data-id='anchor'>anchor</a> <div class='space'></div> <div id="anchor" class="container-full"><h1>Hi</h1></div> <div class='space'></div> <script> $(function(){ $("a").click(function(e) { e.preventDefault(); $id = $(this).attr("data-id"); $("a.clicked").removeClass("clicked"); $(this).addClass("clicked"); $('html, body').animate({ scrollTop: $("#"+$id).offset().top + 100 }, 1000); }); }); </script> </body> </html>

Quelle

2016-04-27 15:21:26

Aber ich benutze diese jQuery für andere Elemente auf der gleichen Seite gibt es eine Möglichkeit, ich kann es nur auf einen bestimmten Anker anwenden? –

Sie könnten einfach den jQuery-Selektor ändern, um spezifischer zu sein, wie zum Beispiel einen Selektor wie '# id' zu verwenden, um nur ein spezifisches Element mit seinem' id' -Attribut auszuwählen. Oder wenn Sie nur Elemente mit dem Attribut "Daten-ID" ansprechen möchten, können Sie '$ ('[Daten-ID']) verwenden. Klicken Sie auf (...)'. –

CSS make Link zu verankern 100px unteren

Antwort

Verwandte Themen