Hoe scrol ik met JavaScript naar de bovenkant van de pagina? De schuifbalk die onmiddellijk naar de bovenkant van de pagina springt, is ook wenselijk, omdat ik niet op zoek ben naar soepel scrollen.

Antwoord 1, autoriteit 100%

Als je de wijziging niet nodig hebt om te animeren, hoef je geen speciale plug-ins te gebruiken – ik zou gewoon de native JavaScript-methode window.scrollTo()gebruiken — doorgeven 0, 0zal de pagina onmiddellijk naar links bovenaan scrollen.

window.scrollTo(xCoord, yCoord);

Parameters

• xCoord is de pixel langs de horizontale as.
• yCoord is de pixel langs de verticale as.

Antwoord 2, autoriteit 60%

Als je soepel schuiven wilt, probeer dan zoiets als dit:

$("a[href='#top']").click(function() {
  $("html, body").animate({ scrollTop: 0 }, "slow");
  return false;
});

Dat vereist elke <a>-tag waarvan href="#top"en zorgt ervoor dat deze soepel naar boven scrollt.

Antwoord 3, autoriteit 8%

Probeer dit om bovenaan te scrollen

<script>
 $(document).ready(function(){
    $(window).scrollTop(0);
});
</script>

Antwoord 4, autoriteit 8%

Betere oplossing met vloeiende animatie:

// this changes the scrolling behavior to "smooth"
window.scrollTo({ top: 0, behavior: 'smooth' });

Referentie: https://developer.mozilla. org/en-US/docs/Web/API/Window/scrollTo#Example

Antwoord 5, autoriteit 5%

Je hebt geen jQuery nodig om dit te doen. Een standaard HTML-tag is voldoende…

<div id="jump_to_me">
    blah blah blah
</div>
<a target="#jump_to_me">Click Here To Destroy The World!</a>

Antwoord 6, autoriteit 3%

Al deze suggesties werken uitstekend voor verschillende situaties. Voor degenen die deze pagina vinden via een zoekopdracht, kan men ook diteen poging. JQuery, geen plug-in, scroll naar element.

$('html, body').animate({
    scrollTop: $("#elementID").offset().top
}, 2000);

Antwoord 7, autoriteit 2%

vloeiend scrollen, puur javascript:

(function smoothscroll(){
    var currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
    if (currentScroll > 0) {
         window.requestAnimationFrame(smoothscroll);
         window.scrollTo (0,currentScroll - (currentScroll/5));
    }
})();

Antwoord 8

<script>
$(function(){
   var scroll_pos=(0);          
   $('html, body').animate({scrollTop:(scroll_pos)}, '2000');
});
</script>

Bewerken:

$('html, body').animate({scrollTop:(scroll_pos)}, 2000);

Op een andere manier scrollen met boven- en linkermarge:

window.scrollTo({ top: 100, left: 100, behavior: 'smooth' });

Antwoord 9

Echt vreemd: deze vraag is nu vijf jaar actief en er is nog steeds geen vanille JavaScript-antwoord om het scrollen te animeren… Dus hier ga je:

var scrollToTop = window.setInterval(function() {
    var pos = window.pageYOffset;
    if ( pos > 0 ) {
        window.scrollTo( 0, pos - 20 ); // how far to scroll on each step
    } else {
        window.clearInterval( scrollToTop );
    }
}, 16); // how fast to scroll (this equals roughly 60 fps)

Als je wilt, kun je dit in een functie inpakken en die aanroepen via het attribuut onclick. Controleer deze jsfiddle

Opmerking: dit is een zeer eenvoudige oplossing en misschien niet de meest performante. Een zeer uitgewerkt voorbeeld is hier te vinden: https://github.com/cferdinandi/smooth-scroll

Antwoord 10

<script>
  $("a[href='#top']").click(function() {
     $("html, body").animate({ scrollTop: 0 }, "slow");
     return false;
  });
</script>

in html

<a href="#top">go top</a>

Antwoord 11

Als je soepel wilt scrollen, probeer dan dit:

$("a").click(function() {
     $("html, body").animate({ scrollTop: 0 }, "slow");
     return false;
});

Een andere oplossing is de JavaScript-methode window.scrollTo :

window.scrollTo(x-value, y-value);

Parameters :

• x-waarde is de pixel langs de horizontale as.
• y-waarde is de pixel langs de verticale as.

Antwoord 12

Met window.scrollTo(0, 0);is erg snel
dus ik heb het voorbeeld van Mark Ursino geprobeerd, maar in Chrome gebeurt er niets
en ik vond dit

$('.showPeriodMsgPopup').click(function(){
    //window.scrollTo(0, 0);
    $('html').animate({scrollTop:0}, 'slow');//IE, FF
    $('body').animate({scrollTop:0}, 'slow');//chrome, don't know if Safari works
    $('.popupPeriod').fadeIn(1000, function(){
        setTimeout(function(){$('.popupPeriod').fadeOut(2000);}, 3000);
    });
});

alle 3 de browsers getest en het werkt
ik gebruik blauwdruk css
dit is wanneer een klant op de knop “Nu boeken” klikt en de huurperiode niet heeft geselecteerd, langzaam naar de top gaat waar de kalenders zijn en een dialoogvenster opent dat naar de 2 velden wijst, na 3 seconden vervaagt het

Antwoord 13

Een veelvan gebruikersraden aan om zowel de html- als de body-tags te selecteren voor compatibiliteit tussen browsers, zoals:

$('html, body').animate({ scrollTop: 0 }, callback);

Hierdoor kun je echter struikelen als je erop rekent dat je callback maar één keer wordt uitgevoerd. Het wordt in feite twee keer uitgevoerd omdat je twee elementen hebt geselecteerd.

Als dat een probleem voor je is, kun je zoiets als dit doen:

function scrollToTop(callback) {
    if ($('html').scrollTop()) {
        $('html').animate({ scrollTop: 0 }, callback);
        return;
    }
    $('body').animate({ scrollTop: 0 }, callback);
}

De reden dat dit werkt, is dat in Chrome $('html').scrollTop()retourneert 0, maar niet in andere browsers zoals Firefox.

Als je niet wilt wachten tot de animatie is voltooid in het geval dat de schuifbalk al bovenaan staat, probeer dan dit:

function scrollToTop(callback) {
    if ($('html').scrollTop()) {
        $('html').animate({ scrollTop: 0 }, callback);
        return;
    }
    if ($('body').scrollTop()) {
        $('body').animate({ scrollTop: 0 }, callback);
        return;
    }
    callback();
}

Antwoord 14

De oude #topkan het lukken

document.location.href = "#top";

Werkt prima in FF, IE en Chrome

Antwoord 15

$(".scrolltop").click(function() {
  $("html, body").animate({ scrollTop: 0 }, "slow");
  return false;
});

.section{
 height:400px;
}
.section1{
  background-color: #333;
}
.section2{
  background-color: red;
}
.section3{
  background-color: yellow;
}
.section4{
  background-color: green;
}
.scrolltop{
  position:fixed;
  right:10px;
  bottom:10px;
  color:#fff;
}

<html>
<head>
<title>Scroll top demo</title>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<div class="content-wrapper">
<div class="section section1"></div>
<div class="section section2"></div>
<div class="section section3"></div>
<div class="section section4"></div>
<a class="scrolltop">Scroll top</a>
</div>
</body>
</html>

document.body.scrollTop = document.documentElement.scrollTop = 0;

<script>
    $(window).scrollTop(100);
</script>

  window.scroll({
      top: 0,
      left: 0,
      behavior: 'smooth'
    });

$('html, body').animate({
    scrollTop: $("div").offset().top
}, time);

function scrollToTop() {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
});

html {
    scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

$('html, body').scrollTop(0);//For scrolling to top
$("body").scrollTop($("body")[0].scrollHeight);//For scrolling to bottom

window.location = '#'

<script>
$(document).ready(function(){
    $("button").click(function(){
        ($('body').scrollTop(0));
    });
});
</script>

<body>
  <section id="top">
    <!-- your content -->
  </section>
  <div id="another"><!-- more content --></div>

<a onclick="document.getElementById('top').scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' })">Click me</a>

  $(document).ready(function() {
      $("a[href='#top']").click(function() {
          $("html, body").animate({ scrollTop: 0 }, "1");              
          $('html, body').stop(true, true);
          //Anything else you want to do in the same action goes here
          return false;                              
      });
  });

function scroll() {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
}

<button onclick="scroll">Scroll</button>

// Get The Id
var topPage = document.getElementById(`top-page`)
// On Click, Scroll to the Top of Page
topPage.onclick = () => window.scrollTo({ top: 0, behavior: 'smooth'}) // Remove behavior: 'smooth' if you don't want smooth scrolling
// On scroll, Show/Hide the button
window.onscroll = () => {
  window.scrollY > 500 // You can change the value if you want
    ? (topPage.style.display = `block`)
    : (topPage.style.display = `none`)
}

body {
    background-color: #111;
    height:5000px;
}
#top-page {
    all:unset;
    position: fixed;
    right: 20px;
    bottom: 20px;
    cursor: pointer;
    font: bold 2rem monospace;
    color:white;
    display: none;
}

<button id="top-page">Top</button>