Wie lässt sich der Link nicht durch Klicken auf die oberste Seite blättern?

Ich habe den folgenden Code auf JSFiddleWie lässt sich der Link nicht durch Klicken auf die oberste Seite blättern?

$(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 
 
     }, 1000); 
 
     event.preventDefault(); 
 
     } 
 
    } 
 
    }); 
 
});

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.0.10/font-awesome-animation.min.css"> 
 

 
</head> 
 

 
<body> 
 
    <div style="background-color:red; height: 1000px"> 
 
    LINK AT THE BOTTOM 
 
    </div> 
 
    <div class="collapse" id="work-exp-collapse"> 
 

 
    <div>TEST HIDDEN DIV HELLO!!</div> 
 

 
    </div> 
 
    <div style="margin: 0 auto; text-align: center; display: block"> 
 
    <i aria-hidden="true" class="fa fa-chevron-down yarrow"></i> <a aria-controls="work-exp-collapse" aria-expanded="false" class="aa-gray-line SeeMore2" data-toggle="collapse" href="#work-exp-collapse">view more experience</a> 
 
    </div> 
 

 
</body> 
 
<!-- JS code --> 
 
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> 
 
<!-- Recpatcha Google --> 
 
<script src="https://www.google.com/recaptcha/api.js"> 
 
</script> 
 
<!--JS below--> 
 

 
</html>

Ich frage mich, wie ich es, wenn Sie es automatisch auf den Link am oberen Bildschirmrand verschwinden klicken, um zu vermeiden machen könnte der Seite statt an der gleichen Stelle zu bleiben, wo das versteckte div erscheint. Sie nur un-kollabiert, indem Sie ...

Aus der Dokumentation

Dank

Quelle

2017-02-03 Anonymous

I aktualisiert haben die [jsfiddle] (https://jsfiddle.net/ddy3353q/4/), nur auf Kommentar '$ ('html, body') animieren ({ scrollTop: target.offset(). Top }, 1000); 'Linie –

Da das target Element noch nicht angezeigt wird, ist target.offset().top0.

Warten Sie, bis das versteckte div angezeigt wird, indem Sie auf shown.bs.collapse hören (gefeuert von Boostrap, link) und scrollen Sie.

if (target.length) { 
    target.one('shown.bs.collapse', function() {   
     $('html, body').animate({ 
     scrollTop: target.offset().top 
     }, 1000); 
    }); 
    event.preventDefault(); 
    }

Demo:. https://jsfiddle.net/ddy3353q/5/

Quelle

2017-02-04 06:50:56

Hallo dort. Danke für die Antwort. Ich bin ein bisschen verwirrt. Ich bin nicht das beste mit js. Was sollte ich dann tun?. –

Ersetzen Sie den Blockcode Ihres JS-Codes von der Zeile "6" durch die Zeile "11". Oder Sie können eine Demo hier überprüfen: https://jsfiddle.net/ddy3353q/5/ –

Hallo, es funktioniert mit THAT-Link, aber jetzt funktioniert der Rest der normalen Anker-Links nicht. Wenn ich sie anklicke, gehen sie nicht zu # Ich habe aktualisieren Sie Ihre https://jsfiddle.net/ddy3353q/6/ Ich habe einen gewöhnlichen Link hinzugefügt –

Angenommen, möchten Sie Autoscroll den Inhalt des div zu sehen: „jQuery unterstützt nicht die Offset-Koordinaten bekommen von versteckten Elementen ". Daher ist das Element, zu dem Sie scrollen möchten, zunächst ausgeblendet und seine Position kann nicht mit .offset() bestimmt werden.

Eine Möglichkeit, dies zu lösen, ist den .animate() Anruf in einem setTimeout() mit einer Verzögerung von 1 zu wickeln. Dadurch wird das Scrollen effektiv verzögert, bis das Element angezeigt wird.

Quelle

2017-02-04 06:20:19

Wie lässt sich der Link nicht durch Klicken auf die oberste Seite blättern?

Antwort

Verwandte Themen