Przewiń na górę strony używając JavaScript / jQuery?

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

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

To zajmie dowolny <a> tag, którego href="#top" i sprawi, że będzie płynnie przewijał się do góry.

Spróbuj przewijać na górze

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

Nie potrzebujesz jQuery, aby to zrobić. Standardowy znacznik HTML wystarczy...

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

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

Wszystkie te sugestie świetnie sprawdzają się w różnych sytuacjach. Dla tych, którzy znajdą tę stronę poprzez wyszukiwanie, 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>

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

W html

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

Jeśli chcesz zrobić płynne przewijanie, spróbuj tego:

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

Innym rozwiązaniem jest okno JavaScript.metoda scrollTo:

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

Parametry:

• wartość x to piksel wzdłuż osi poziomej.
• wartość y jest pikselem wzdłuż osi pionowej.

Z window.scrollTo(0, 0); jest bardzo szybki
więc próbowałem Mark Ursino przykład, 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
to jest, gdy klient kliknie przycisk "Zarezerwuj teraz" i nie ma wybranego okresu wynajmu, powoli przesuwa się do góry, gdzie znajdują się kalendarze i otwiera div dialogowe wskazujące na 2 pola, po 3 sekundach zanika

A lot z użytkownicy zalecają wybranie zarówno znaczników html, jak i body dla zgodności między przeglądarkami, tak:

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

To może potknąć się jednak, jeśli liczysz na oddzwonienie działa tylko raz. W rzeczywistości będzie działać dwa razy, ponieważ wybrałeś dwa elementy.

Jeśli 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);
}

To działa w Chrome $('html').scrollTop() zwraca 0, ale nie w innych przeglądarkach, takich jak Firefox.

Jeśli nie chcesz czekać na zakończenie animacji, jeśli pasek przewijania jest 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();
}

Naprawdę dziwne: to pytanie jest aktywne od pięciu lat i nadal nie ma odpowiedzi na waniliowy JavaScript, aby animować przewijanie... więc proszę bardzo:

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ć za pomocą atrybutu onclick. Sprawdź to jsfiddle

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

The old #top can do the trick

document.location.href = "#top";

Działa dobrze w FF, IE i Chrome

Spróbuj tego

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

$(document).scrollTop(0); też działa.

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

Edit:

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

Non - jQuery solution / pure 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 => Element Dom, w którym chcesz przenieść przewijanie.

Czas = > milisekund, określ prędkość 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

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

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

window.location = '#'

Po kliknięciu przycisku" Przejdź do góry"

Przykładowe demo:

Output.jsbin.com/fakumo#

PS: nie używaj tego podejścia, gdy używasz nowoczesnych bibliotek, takich jak angularjs. To może złamać hashbang URL.

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

LUB możesz użyć dowolnej liczby przewijanych wtyczek, które czynią to bardziej eleganckim.

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

Po prostu użyj tego skryptu do przewijania do góry bezpośrednio.

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

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

Dodaj przycisk "Przejdź do góry"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>

Jeśli nie chcesz płynnego przewijania, możesz oszukiwać i zatrzymać animację płynnego przewijania zaraz po jej 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 polecane/dozwolone, ale działa :)

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 SharePoint 2016.

To musi być zrobione tak: https://sharepoint.stackexchange.com/questions/195870/

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

Motywacja

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

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

Rozwiązanie

Umieść identyfikator do tagu, do którego chcesz przewinąć, na przykład pierwszą sekcję , która odpowiada na to pytanie, ale identyfikator może być umieszczony 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 z kodem takim jak ten.

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

Gdzie argumentem document.getElementById jest id tagu, do którego chcesz przewijać po klik.

Active all Browser. Powodzenia

var process;
        var delay = 50; //milisecond scroll top
        var scrollPixel = 20; //pixel U want to change after milisecond
        //Fix Undefine pageofset when using IE 8 below;
        function getPapeYOfSet() {
            var yOfSet = (typeof (window.pageYOffset) === "number") ? window.pageYOffset : document.documentElement.scrollTop;
            return yOfSet;
        }



        function backToTop() {
            process = setInterval(function () {
                var yOfSet = getPapeYOfSet();
                if (yOfSet === 0) {
                    clearInterval(process);
                } else {
                    window.scrollBy(0, -scrollPixel);
                }
            }, delay);
        }

Spróbuj tego

<script>
  $(function(){
   $('a').click(function(){
    var href =$(this).attr("href");
   $('body, html').animate({
     scrollTop: $(href).offset().top
     }, 1000)
  });
 });
 </script>