Hoe te scrollen naar een element met jQuery?

Ik wil dat de pagina naar een div kan bladeren, dat staat bovenaan de pagina. Ik heb knoppen voor anderen onderdeel van de pagina, maar dit werkt niet wanneer ik naar de onderkant scroll en klik op de knop, het gaat niet naar de bovenkant van de pagina. Hier is de Codepen: https://codepen.io/filizof/pen/xygwyp?Editors= 1010

$(document).ready(function() {
$("#btn1").click(function() {
$("body").scrollTo("#menudiv");
});
});

Antwoord 1, Autoriteit 100%

JavaScript Antwoord:

Als u soepel naar een element wilt bladeren met “Pure JavaScript”, kunt u zoiets doen:

document.querySelector('#menudiv').scrollIntoView({
  behavior: 'smooth' 
});

Meer info hier: https: //developer.mozilla .org / nl-us / docs / web / api / element / scrollindoview

OPMERKING: Zie https:/caniuse.com/#Feat=ScrollItoView voor de nieuwste browserondersteuning.

JQuery Antwoord:

Als u graag naar een element wilt bladeren met behulp van “jQuery”, kunt u iets doen als:

$(document).ready(function() {
  $(".btns").click(function() {
    $("html").animate(
      {
        scrollTop: $("#menudiv").offset().top
      },
      800 //speed
    );
  });
});

voorbeeld: https://jsbin.com/xaciloteqe/1/edit ?html,js,uitvoer

BEWERKEN (FEB 2021):

Ik dacht dat dit nuttig zou kunnen zijn voor mensen die dit onderwerp onderzoeken:

https://css-tricks.com/cancelable-smooth-scrolling/

Antwoord 2, autoriteit 21%

JavaScript heeft de functie element.scrollIntoView().

zoiets als:

$("#menudiv")[0].scrollIntoView()

Antwoord 3, autoriteit 5%

U kunt eenvoudige JS gebruiken om dit voor elkaar te krijgen. scrollIntoView() schuift naar het zichtbare gebied.

Zoiets als dit:

var elmnt = document.getElementById("content");
elmnt.scrollIntoView();

Antwoord 4

<script type="text/javascript" src="jquery-3.2.1.js">

vervangen door

<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>

Antwoord 5

Ik werk je code een beetje bij, het zou moeten zijn

$(document).ready(function() {
  $("#btn1").click(function()
 {
   var elmnt = document.getElementById("menudiv");
   elmnt.scrollIntoView();
 });
});

Om naar een div/element te scrollen, is dit de scrollIntoView HTML DOM-methode, het is geen JQuery-functie.

Hier is de codepen JS Scroll naar een element

Antwoord 6

Ik had een klein probleem vanwege een of andere markdownify-plug-in, hoe dan ook, ik moest zoeken naar het doel van de link, dus ik gebruikte dit omzeiling. Het werkt eigenlijk voor een verscheidenheid aan elementselectors, in mijn geval was mijn link <a href="#target">some text</a>en mijn werkelijke doel was <a href="target"></a>voor dit specifieke geval kan ik je die oplossing geven:

var scrollAnchorSamePage = function() {
    $('a[href^="#"]').click(function() {
      event.preventDefault();
      var id  = $(this).attr("href");
      // okay lets remove the hashtag in front:
      var target = $('a[href^="' + id.substring(1, id.length) + '"]');
      // and I need a little offset due to a fixed sticky header by 140
      $('html, body').animate({ scrollTop: target.offset().top - (160)  }, 1000);
    });
}
scrollAnchorSamePage();

PS: ik gebruik de volgende imports van jQuery-pakketten, je kunt ze vlak voor je afsluitende </body>html-tag in je DOM toevoegen.

<!-- Latest minified jQuery -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<!-- Latest compiled and minified bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>