Przewiń do góry strony za pomocą JavaScript?

Jak przewinąć do góry strony za pomocą JavaScript? Jest to pożądane, nawet jeśli pasek przewijania natychmiast przeskakuje na górę. Nie szukam płynnego przewijania.

Jeśli nie potrzebujesz zmiany do animacji, nie musisz używać żadnych specjalnych wtyczek - po prostu użyję natywnego okna JavaScript. ScrollTo - przekazanie 0,0 spowoduje natychmiastowe przewinięcie strony w lewy górny róg .

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

Parametry

• Współrzędna x to piksel wzdłuż osi poziomej.
• Współrzędna y to piksel wzdłuż osi pionowej.

Jeśli chcesz płynne przewijanie, spróbuj czegoś takiego:

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

Spowoduje to zabranie dowolnego <a>znacznika href="#top"i sprawi, że będzie płynnie przewijać do góry.

Spróbuj przewinąć na górze

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

Lepsze rozwiązanie z płynną animacją:

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

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

Aby to zrobić, nie potrzebujesz jQuery. Wystarczy standardowy tag HTML ...

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

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

Wszystkie te sugestie sprawdzają się doskonale w różnych sytuacjach. Dla tych, którzy znaleźli tę stronę poprzez wyszukiwania, można również dać to spróbować. JQuery, brak wtyczki, przewiń do elementu.

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

płynne przewijanie, czysty javascript:

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

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

Edytować:

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

Kolejny sposób przewijania z górnym i lewym marginesem:

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

<script>

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

w html

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

Naprawdę dziwne: to pytanie jest aktywne od pięciu lat i nadal nie ma waniliowej odpowiedzi JavaScript na animację przewijania… Więc proszę:

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)

Jeśli chcesz, możesz zawinąć to w funkcję i wywołać to za pomocą onclickatrybutu. Sprawdź to jsfiddle

Uwaga: jest to bardzo podstawowe rozwiązanie, a może nie najskuteczniejsze. Bardzo rozbudowany przykład można znaleźć tutaj: https://github.com/cferdinandi/smooth-scroll

Jeśli chcesz płynnie przewijać, spróbuj tego:

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

Innym rozwiązaniem jest metoda JavaScript window.scrollTo:

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

Parametry:

• Wartość x to piksel wzdłuż osi poziomej.
• Wartość y to piksel wzdłuż osi pionowej.

Z window.scrollTo(0, 0);jest bardzo szybki,
więc wypróbowałem przykład Marka Ursino, ale w Chrome nic się nie dzieje
i znalazłem to

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

przetestowałem wszystkie 3 przeglądarki i działa,
używam blueprint css,
gdy klient kliknie przycisk „Zarezerwuj teraz” i nie ma wybranego okresu wynajmu, powoli przechodzi na górę, gdzie znajdują się kalendarze, i otwiera okno dialogowe wskazujące na 2 pola, po 3 sekundach zanika

Dużo od użytkowników zalecamy wybranie zarówno HTML i ciała tagi dla kompatybilności z różnymi przeglądarkami, tak jak poniżej:

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

Może to Cię jednak potknąć, jeśli liczysz, że oddzwonienie uruchomi się tylko raz. W rzeczywistości będzie działał dwukrotnie, ponieważ wybrałeś dwa elementy.

Jeśli jest to dla Ciebie problem, możesz zrobić coś takiego:

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

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

Powodem tego jest to, że Chrome $('html').scrollTop()zwraca 0, ale nie w innych przeglądarkach, takich jak Firefox.

Jeśli nie chcesz czekać na zakończenie animacji w przypadku, gdy pasek przewijania znajduje się już u góry, spróbuj tego:

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

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

    callback();
}

Stare #topmogą załatwić sprawę

document.location.href = "#top";

Działa dobrze w FF, IE i Chrome

Spróbuj tego

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

$(document).scrollTop(0); działa również.

Rozwiązanie inne niż jQuery / czysty JavaScript:

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

To zadziała:

window.scrollTo(0, 0);

Wypróbuj ten kod:

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

div => Dom Element, w którym chcesz przenieść przewiń.

czas => milisekundy, określ szybkość przewijania.

Dlaczego nie używasz wbudowanej funkcji JQuery scrollTop:

$('html, body').scrollTop(0);//For scrolling to top

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

Krótko i prosto!

Nie potrzebujesz JQuery. Po prostu możesz wywołać skrypt

window.location = '#'

po kliknięciu przycisku „Idź na górę”

Przykładowe demo:

output.jsbin.com/fakumo#

PS: Nie używaj tego podejścia, gdy korzystasz z nowoczesnych bibliotek, takich jak angularjs. To może zepsuć mieszanie adresów URL.

Po prostu użyj tego skryptu, aby przewinąć do góry bezpośrednio.

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

Rozwiązanie Pure JavaScript:

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

Piszę animowane rozwiązanie na Codepen

Możesz także wypróbować inne rozwiązanie z scroll-behavior: smoothwłaściwością CSS .

html {
    scroll-behavior: smooth;
}

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

Jeśli nie chcesz płynnego przewijania, możesz oszukiwać i zatrzymywać płynne przewijanie animacji niemal natychmiast po uruchomieniu ... tak:

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

Nie mam pojęcia, czy jest to zalecane / dozwolone, ale działa :)

Kiedy tego użyjesz? Nie jestem pewien, ale może kiedy chcesz użyć jednego kliknięcia do animacji jednej rzeczy za pomocą Jquery, ale zrobić inną bez animacji? tzn. otwórz wsuwany panel logowania administratora u góry strony i od razu przeskocz na górę, aby go zobaczyć.

Motywacja

To proste rozwiązanie działa natywnie i zapewnia płynne przewijanie do dowolnej pozycji.

Unika używania linków zakotwiczonych (tych z #), które moim zdaniem są przydatne, jeśli chcesz utworzyć link do sekcji, ale w niektórych sytuacjach nie są tak wygodne, szczególnie gdy wskazuje się na górę, co może prowadzić do dwóch różnych adresów URL wskazujących na ta sama lokalizacja ( http://www.example.org i http://www.example.org/# ).

Rozwiązanie

Umieść identyfikator w tagu, do którego chcesz przewinąć, na przykład w pierwszej sekcji , która odpowiada na to pytanie, ale identyfikator można umieścić wszędzie na stronie.

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

Następnie jako przycisk możesz użyć linku, po prostu edytuj atrybut onclick za pomocą takiego kodu.

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

Gdzie argumentem document.getElementByIdjest identyfikator znacznika, który chcesz przewinąć po kliknięciu.

Możesz po prostu użyć celu z linku, takiego jak #someid, gdzie #someid jest identyfikatorem div.

Możesz też użyć dowolnej liczby przewijanych wtyczek, które uczynią to bardziej eleganckim.

http://plugins.jquery.com/project/ScrollTo jest przykładem.

Możesz spróbować użyć JS jak w tym Fiddle http://jsfiddle.net/5bNmH/1/

Dodaj przycisk „Idź na górę” w stopce strony:

<footer>
    <hr />
    <p>Just some basic footer text.</p>
    <!-- Go to top Button -->
    <a href="#" class="go-top">Go Top</a>
</footer>

function scrolltop() {

    var offset = 220;
    var duration = 500;

    jQuery(window).scroll(function() {
        if (jQuery(this).scrollTop() > offset) {
            jQuery('#back-to-top').fadeIn(duration);
        } else {
            jQuery('#back-to-top').fadeOut(duration);
        }
    });

    jQuery('#back-to-top').click(function(event) {
        event.preventDefault();
        jQuery('html, body').animate({scrollTop: 0}, duration);
        return false;
    });
}

Żadna z powyższych odpowiedzi nie będzie działać w programie SharePoint 2016.

Należy to zrobić w następujący sposób: /sharepoint/195870/

var w = document.getElementById("s4-workspace");
w.scrollTop = 0;