Ich suche nach einer Möglichkeit, einen Folieneffekt einzufügen, wenn Sie auf einen Link zu einem lokalen Anker auf der Seite klicken.
Ich möchte etwas, wo Sie einen Link wie folgt haben:
<a href="#nameofdivetc">link text, img etc.</a>
Möglicherweise wurde eine Klasse hinzugefügt, damit Sie wissen, dass dieser Link ein Gleitlink sein soll:
<a href="#nameofdivetc" class="sliding-link">link text, img etc.</a>
Wenn Sie dann auf diesen Link klicken, wird die Seite an der gewünschten Stelle nach oben oder unten verschoben (dies kann ein Div, eine Überschrift, ein Seitenanfang usw. sein).
Das hatte ich vorher:
$(document).ready(function(){
$(".scroll").click(function(event){
//prevent the default action for the click event
event.preventDefault();
//get the full url - like mysitecom/index.htm#home
var full_url = this.href;
//split the url by # and get the anchor target name - home in mysitecom/index.htm#home
var parts = full_url.split("#");
var trgt = parts[1];
//get the top offset of the target anchor
var target_offset = $("#"+trgt).offset();
var target_top = target_offset.top;
//goto that anchor by setting the body scroll top to anchor top
$('html, body').animate({scrollTop:target_top}, 1500, 'easeInSine');
});
});
jquery
jquery-plugins
anchor
slide
ade123
quelle
quelle
$("a[href^=#]").click(function(e) { e.preventDefault(); var dest = $(this).attr('href'); console.log(dest); $('html,body').animate({ scrollTop: $(dest).offset().top }, 'slow'); });
history.pushState(null, null, dest);
wie Sie die Standard-Standort-Hash-Änderung verhindernAngenommen, Ihr href- Attribut ist mit einem div mit der Tag- ID mit demselben Namen verknüpft (wie üblich), können Sie diesen Code verwenden:
HTML
JAVASCRIPT - (Jquery)
quelle
name
. Wenn Sie es verwenden<a name="something"></a>
, können Sie es auch von außen referenzieren, Ihre Lösung bietet dies jedoch nicht.Das hat mir das Leben so viel leichter gemacht. Sie fügen im Grunde Ihr Element-ID-Tag und seine Scrolls ohne viel Code ein
http://balupton.github.io/jquery-scrollto/
In Javascript
In Ihrem HTML
Hier bin ich ganz unten auf der Seite
quelle
quelle
+
verkettet die Verwendung mit Strings oder Vars diese wie :"#some_anchor"
. Wirklich, der zweite Concatanchor_id + ""
wird nicht benötigt, glaube ich.Sie sollten auch berücksichtigen, dass das Ziel eine Polsterung hat und daher
position
anstelle von verwendenoffset
. Sie können auch eine potenzielle Navigationsleiste berücksichtigen, die das Ziel nicht überlappen soll.quelle
history.pushState({}, "", this.href);
, um die URLMein Ansatz mit jQuery, einfach alle eingebetteten Ankerlinks zu verschieben, anstatt sofort zu springen
Es ist der Antwort von Santi Nunez sehr ähnlich, aber zuverlässiger .
Unterstützung
quelle
Ich habe mich an meinen ursprünglichen Code gehalten und auch einen Link zum Einblenden von oben nach oben eingefügt, der diesen Code verwendet, und ein bisschen von hier auch:
http://webdesignerwall.com/tutorials/animated-scroll-to-top
Funktioniert gut :)
quelle
Sie können den Wert offsetTop und scrollTop hinzufügen, falls Sie nicht die gesamte Seite, sondern verschachtelten Inhalt animieren.
z.B :
quelle
SS Langsamer Bildlauf
Diese Lösung erfordert keine Ankertags, aber Sie müssen natürlich die Menüschaltfläche (beliebiges Attribut, z. B. 'ss') mit der Zielelement-ID in Ihrem HTML-Code abgleichen.
ss="about"
bringt dich zuid="about"
Geige
https://jsfiddle.net/Hastig/stcstmph/4/
quelle
Hier ist die Lösung, die für mich funktioniert hat. Dies ist eine generische Funktion, die für alle
a
Tags funktioniert, die sich auf einen Namen beziehena
Hinweis 1: Stellen Sie sicher, dass Sie
"
in Ihrem HTML-Code doppelte Anführungszeichen verwenden . Wenn Sie einfache Anführungszeichen verwenden, ändern Sie den obigen Teil des Codes invar target = $("a[name='" + name.substring(1) + "']");
Hinweis 2: In einigen Fällen, insbesondere wenn Sie die Sticky-Leiste vom Bootstrap aus verwenden, wird der Name
a
unter der Navigationsleiste ausgeblendet. In diesen Fällen (oder einem ähnlichen Fall) können Sie die Anzahl der Pixel in Ihrem Bildlauf reduzieren, um die optimale Position zu erzielen. Zum Beispiel:$('html,body').animate({ scrollTop: $(target).offset().top - 15 }, 'slow');
bringt Sie zu demtarget
mit 15 Pixeln oben links.quelle
Ich bin auf dieses Beispiel unter https://css-tricks.com/snippets/jquery/smooth-scrolling/ gestoßen, in dem jede Codezeile erklärt wurde. Ich fand das die beste Option.
https://css-tricks.com/snippets/jquery/smooth-scrolling/
Sie können einheimisch werden:
oder mit jquery:
quelle
Ok einfachste Methode ist: -
Innerhalb der Klickfunktion (Jquery): -
HTML
quelle
Testen Sie es hier:
http://jsbin.com/ucati4
quelle
Folgende Lösung hat bei mir funktioniert:
quelle