Smoothscroll funktioniert nicht in Chrome, funktioniert aber in anderen Browsern

Ich habe eine Schaltfläche (es ist ein Font-Symbol), die, wenn Sie darauf klicken, scrollt es zu einem bestimmten div. In Safari hat es funktioniert, aber jetzt teste ich es in Chrome, es funktioniert nicht.Smoothscroll funktioniert nicht in Chrome, funktioniert aber in anderen Browsern

Das Skript Ich verwende (jQuery)

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

    var target = this.hash; 
    var $target = $(target); 

    $('html, body').stop().animate({ 
     'scrollTop': $target.offset().top 
    }, 900, 'swing', function() { 
     window.location.hash = target; 
    }); 
}); 
});

Die Schaltfläche

<a href="#arrow-down-click"> 
<i class="fa fa-angle-down fa-4x arrow-down" aria-hidden="true"></i> 
</a>

Wie diese Arbeit in Chrome bekommen (und vielleicht auch andere Browser ich noch nicht getestet haben) auch?

EDIT (auch in einem Kommentar):

Ich habe gerade herausgefunden: Wenn ich in css html { overflow: hidden; }-auto und body { overflow: auto; }-hidden, die Animation funktioniert ändern. Aber das Problem ist: Ich kann nicht von oben nach unten scrollen, ohne die Taste zu verwenden, um zu Teil 2 zu gehen, und wenn ich Teil 2 bin, kann ich nirgends scrollen (also nicht zurück nach oben oder zu Teil 3). Hat jemand eine Idee dafür?

EDIT 2 Im Moment habe ich dies: https://jsfiddle.net/jk1540oc/. Es geht zu dem div ich direkt an, aber es animiert nicht mehr (nicht in Chrome und nicht in Safari). Sie können mit der Taste auch nicht zweimal nach unten scrollen.

Quelle

2017-06-28 Julian

Was http://www.yourURLhere.com/#arrow-down-click geändert, genau, nicht 'es bedeutet nicht, Werk'? Wie funktioniert es nicht? Was erwartest du gegen was passiert? etc. – phuzi

@phuzi In Safari sieht man es sehr schön und glatt herunterscrollen. In Chrome dauert es eine Sekunde oder so, und Sie sehen das Div aus dem Nichts, anstatt glatt zu scrollen – Julian

Ich habe gerade herausgefunden: wenn ich in css html ändern {Überlauf: versteckt; } zu auto und body {overflow: auto; } bis versteckt, die Animation funktioniert. Aber das Problem ist: Ich kann nicht von oben nach unten scrollen, ohne die Taste zu verwenden, um zu Teil 2 zu gehen, und wenn ich Teil 2 bin, kann ich nirgends scrollen (also nicht zurück nach oben oder zu Teil 3). Hat jemand eine Idee dafür? – Julian

Ich empfehle html, body { overflow: hidden, height: 100% } halten und dann ein Wrapper div mit { overflow: auto; height: 100% }

<html> 
    <body> 
    <div id="site-wrapper"> everything in here </div> 
    </body> 
</html>

Dies ist ein Muster, das ich für eine sehr lange Zeit nicht benutzt habe, und es hat mir viele Kopfschmerzen gespeichert. Dann machen Sie alle Ihre Scroll-Animationen auf dem Div. Hier ist eine Arbeits Demo:

https://jsfiddle.net/b4uje52o/2/

Quelle

2017-06-28 21:45:25

Danke! Es scrollt jetzt: also vielen Dank! Aber es gibt ein Problem. Wenn du nicht ganz oben auf der Seite bist, aber du kannst auf den Knopf klicken, bringt dich nur ein bisschen runter und nicht zum ganzen Ziel-Div und wenn du klickst, geht es wieder ein bisschen weiter .JSFiddle: https://jsfiddle.net/1b1pj91q/ – Julian

Sie müssen die Logik für die Bestimmung der Bildlaufposition anpassen. Hier ist ein Beispiel mit den Berechnungen behoben: https://jsfiddle.net/1b1pj91q/1/ –

Es funktioniert perfekt! Danke für deine Hilfe :-)! – Julian

Ich stimme die erste Frage etwas vage war. Allerdings hatte ich ein ähnliches Problem, da Chrome Smoothscrolling nicht mit Javascript implementiert hat. Ich war in der Lage, das Problem zu lösen, indem ich einfach den Link # durch den vollständigen Link im HTML-Code ersetzte.

Aus Ihrer Frage:

<a href="#arrow-down-click"> <i class="fa fa-angle-down fa-4x arrow-down" aria-hidden="true"></i> </a>

I #arrow-down-click

Quelle

2018-01-26 05:23:14 Moomio

Smoothscroll funktioniert nicht in Chrome, funktioniert aber in anderen Browsern

Antwort

Verwandte Themen