Rull til toppen av siden ved hjelp av JavaScript?

Hvordan ruller jeg til toppen av siden ved hjelp av JavaScript? At rullefeltet hoppe direkte til toppen av siden er også ønskelig, siden jeg ikke ønsker å oppnå jevn rulling.

Svar #1

Hvis du ikke trenger at endringen skal animeres, trenger du ikke bruke noen spesielle plugins - jeg ville bare bruke den native JavaScript-window.scrollTo()-metoden -- å sende inn 0, 0 vil rulle siden til øverst til venstre umiddelbart.

window.scrollTo(xCoord, yCoord);

Parametere

  • xCoord er pikselet langs den horisontale aksen.
  • yCoord er pikselet langs den vertikale aksen.

Svar #2

Hvis du faktisk vil ha jevn scrolling, prøv noe som dette:

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

Det vil ta hvilken som helst <a>-tagg hvis href="#top" og gjøre at den smidig ruller til toppen.

Svar #3

Bedre løsning med jevn animasjon:

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

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

Svar #4

Prøv dette for å bla til toppen

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

Svar #5

Du trenger ikke jQuery for å gjøre dette. En vanlig HTML-tagg vil være nok...

<div id="jump_to_me">
    blah blah blah
</div>

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

Svar #6

Alle disse forslagene fungerer bra for forskjellige situasjoner. For de som finner denne siden gjennom et søk, kan man også prøve dette. JQuery, ingen plugg-in, bla til element.

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

Svar #7

jevn rulling, ren javascript:

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

Svar #8

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

Rediger :

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

En annen måte å rulle med topp- og venstremargin:

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

Svar #9

Virkelig merkelig: Dette spørsmålet har vært aktivt i fem år nå, og det finnes fortsatt ingen vanlig JavaScript-svar for å animere rullingen… Så her får du det:

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)

Hvis du vil, kan du pakke dette inn i en funksjon og kalle den via onclick-attributtet. Sjekk denne jsfiddlen

Merk: Dette er en veldig grunnleggende løsning og kanskje ikke den mest effektive. Et veldig detaljert eksempel kan finnes her: https://github.com/cferdinandi/smooth-scroll

Svar #10

Rull til toppen av siden med animasjon:

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

Svar #11

<script>

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

i html

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

Svar #12

Svært jevn rulling og animasjon med vanlig Javascript, uten jQuery

// Get the element
let topBtn = document.querySelector(".top-btn");

// On Click, Scroll to the page's top, replace 'smooth' with 'instant' if you don't want smooth scrolling
topBtn.onclick = () => window.scrollTo({ top: 0, behavior: "smooth" });

// On scroll, Show/Hide the btn with animation
window.onscroll = () => topBtn.style.opacity = window.scrollY > 500 ? 1 : 0;
body {
  background-color: #111;
  height: 5000px;
  font-size:5rem;
  color: white;
}

.top-btn {
  all: unset;
  font-size:1.5rem; 
  position: fixed;
  right: 20px;
  bottom: 20px;
  cursor: pointer;
  transform:scale(1.8);
  opacity: 0;
  transition: .3s;
}
<button class="top-btn">🔝</button>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Quisque vel sem vel dui sodales cursus. Vivamus nec erat eu nisl facilisis laoreet vel a dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc vel elit eget mauris gravida dictum non at eros. Sed nec massa eu justo interdum fringilla. Fusce nec dolor auctor, tincidunt purus id, feugiat justo. Pellentesque tincidunt, mauris a dapibus eleifend, libero lorem congue elit, eget iaculis odio metus non mi." "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Quisque vel sem vel dui sodales cursus. Vivamus nec erat eu nisl facilisis laoreet vel a dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc vel elit eget mauris gravida dictum non at eros. Sed nec massa eu justo interdum fringilla. Fusce nec dolor auctor, tincidunt purus id, feugiat justo. Pellentesque tincidunt, mauris a dapibus eleifend, libero lorem congue elit, eget iaculis odio metus non mi." "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Quisque vel sem vel dui sodales cursus. Vivamus nec erat eu nisl facilisis laoreet vel a dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc vel elit eget mauris gravida dictum non at eros. Sed nec massa eu justo interdum fringilla. Fusce nec dolor auctor, tincidunt purus id, feugiat justo. Pellentesque tincidunt, mauris a dapibus eleifend, libero lorem congue elit, eget iaculis odio metus non mi." "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Quisque vel sem vel dui sodales cursus. Vivamus nec erat eu nisl facilisis laoreet vel a dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc vel elit eget mauris gravida dictum non at eros. Sed nec massa eu justo interdum fringilla. Fusce nec dolor auctor, tincidunt purus id, feugiat justo. Pellentesque tincidunt, mauris a dapibus eleifend, libero lorem congue elit, eget iaculis odio metus non mi." "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Quisque vel sem vel dui sodales cursus. Vivamus nec erat eu nisl facilisis laoreet vel a dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc vel elit eget mauris gravida dictum non at eros. Sed nec massa eu justo interdum fringilla. Fusce nec dolor auctor, tincidunt purus id, feugiat justo. Pellentesque tincidunt, mauris a dapibus eleifend, libero lorem congue elit, eget iaculis odio metus non mi."</p>

Med React.js

import { useEffect, useState } from 'react';

export default function ScrollToTop() {
  const [isVisible, setIsVisible] = useState(false);

  const handleScroll = () => setIsVisible(window.scrollY > 500);
  const scrollToTop = () => window.scrollTo({ top: 0, behavior: 'smooth' });


  useEffect(() => {
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  return (
    <button
      style={{
        all: 'unset',
        fontSize: '1.5rem',
        position: 'fixed',
        right: '20px',
        bottom: '20px',
        cursor: 'pointer',
        transform: 'scale(1.8)',
        opacity: isVisible ? 1 : 0,
        transition: '0.3s',
      }}
      onClick={scrollToTop}
    >
      🔝
    </button>
  );
}

Svar #13

Med window.scrollTo(0, 0); går det veldig raskt
så jeg prøvde Mark Ursino-eksemplet, men i Chrome skjer ingenting
og jeg fant dette

$('.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);
    });
});

testet alle 3 nettlesere og det fungerer
jeg bruker blueprint css
dette skjer når en klient klikker på "Book nå"-knappen og ikke har valgt leieperiode, beveger seg sakte til toppen hvor kalenderne er og åpner en dialogboks som peker på de 2 feltene, etter 3 sekunder forsvinner den

Svar #14

Hvis du vil ha jevn rulling, prøv dette:

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

En annen løsning er JavaScript window.scrollTo-metoden:

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

Parametere :

  • x-verdien er pikselen langs den horisontale aksen.
  • y-verdien er pikselen langs den vertikale aksen.

Svar #15

Mange brukere anbefaler å velge både html- og body-taggene for kompatibilitet på tvers av nettlesere, slik:

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

Dette kan imidlertid lure deg hvis du regner med at tilbakekallingen din bare kjører én gang. Den vil faktisk kjøre to ganger fordi du har valgt to elementer.

Hvis det er et problem for deg, kan du gjøre noe slikt:

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

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

Grunnen til at dette fungerer er at i Chrome $('html').scrollTop() returnerer 0, men ikke i andre nettlesere som Firefox.

Hvis du ikke vil vente på at animasjonen skal fullføres i tilfelle rullefeltet allerede er på toppen, prøv dette:

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

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

    callback();
}

Svar #16

Den gamle #top kan gjøre trikset

document.location.href = "#top";

Fungerer fint i FF, IE og Chrome

Svar #17

Dette vil fungere:

window.scrollTo(0, 0);

Svar #18

Ikke-jQuery løsning/ren JavaScript:

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

Svar #19

$(".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>

Svar #20

Den tilsvarende løsningen i TypeScript kan være som følger

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

Svar #21

Prøv dette

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

Svar #22

$ (document).scrollTop(0); fungerer også.

Svar #23

Ren JavaScript-løsning:

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

Jeg skriver en animert løsning på Codepen

Du kan også prøve en annen løsning med CSS scroll-behavior: smooth-egenskapen.

html {
    scroll-behavior: smooth;
}

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

Svar #24

Prøv denne koden:

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

div => Dom-elementet hvor du vil flytte scroll.

tid => millisekunder, definerer hastigheten på rullingen.

Relaterte artikler