jQuery scrollen zu div wird nicht scrollen, nur springen

Ich weiß, dass diese Frage schon einmal gestellt wurde, aber ich kann es nicht funktionieren lassen, egal wie viele Links und Demos ich in den Antworten ausprobiert habe.jQuery scrollen zu div wird nicht scrollen, nur springen

Bitte nehmen Sie sich einen Blick:

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <!-- Required meta tags --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
    <!-- Bootstrap CSS --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
    <link rel="stylesheet" href="css/custom.css"> 
    </head> 
    <body> 

<div class="jumbotron jumbotron-fluid"> 
    <div class="container container-fluid hiimorsi"> 

<a href="#about"><img src="img/arrow-211-64.png" class=" d-block img-fluid"></a> 
</div> 
</div> 

<script src="app.js" type="text/javascript"></script> 
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 

    </body>

Mein jQuery-Schnipsel (aktuelle)

$(document).ready(function() { 
    $("#arrow").on("click", function (e) { 
     document.querySelector('.hello').scrollIntoView({ 
      behavior: 'smooth' 
     }); 
    }); 
});

Wie man sehen kann ich Bootstrap bin mit (zum ersten Mal), fragen, ob vielleicht ist Unsinn mit dem Code?

Vielen Dank im Voraus.

Quelle

2017-01-26 Orsi

Warum schließt du jQuery zweimal ein? – Andreas

Ist das dein vollständiger HTML? Kann '.hello' Element nicht sehen. –

Warum verwenden Sie 'document.querySelector ('. Hallo')' anstelle des Selektors von jQuery? – Jaumzera

Es ist, weil Sie # als Ihr Wert ref eingeben.

<a href="#about"> 
<img src="img/arrow-211-64.png" class=" d-block img-fluid"> 
</a>

Was passiert ist, wäre es an den oberen Rand des Browsers springen, wenn darauf geklickt.

Ändern Sie diesen an:

<a> 
    <img src="img/arrow-211-64.png" class=" d-block img-fluid"> 
</a>

Quelle

2017-01-26 20:23:11

#about bezieht sich auf ein div mit einer ID "über" - bin ich falsch, das zu verwenden ?? – Orsi

@Orsi Nun in Ihrem Fall, da Sie eine glatte Scroll haben möchten, dann ist es nicht richtig, '# about' zu verwenden. Wenn Sie auf ein Element mit einem href '# about' klicken, wird sofort zu diesem Element gesprungen. –

warum nicht die jquery Animationseffekt verwenden.

<script type="text/javascript"> 
     (function(){ 
      $("#arrow").on("click", function (e) { 
       let scrollToPos = document.querySelector('.hello').offsetTop; 
       $('body').animate({scrollTop: scrollToPos },500,'linear'); 

      }); 
     })(); 
    </script>

nicht sicher, aber glauben, dass die scrollIntoView nativen Wirkung keine Animation hat/auf sie erleichtert, aber es ist Arbeit zu diesem Artikel zu nativ springen ist. Aber zitiere mich nicht dazu :-)

Quelle

2017-01-26 20:29:51

Ich habe es gerade ausprobiert und es funktioniert immer noch nicht - es springt zu dem spezifischen Bereich, im Gegensatz zu langsamem Scrollen. Kannst du es vielleicht im Geiger anschauen? https://jsfiddle.net/7cnpbr83/ Vielen Dank im Voraus. – Orsi

müssen Sie auch jquery erleichtern? aber werde schnell schauen :-) –

nothign um dort anzuklicken und wenn ich auf den lustigen link klicke bekomme ich ein modales pop up nichts zum scrollen ??? –

jQuery scrollen zu div wird nicht scrollen, nur springen

Antwort

Verwandte Themen