Прокрутите страницу вверх с помощью JavaScript / jQuery?

Я <button> на странице, когда эта кнопка нажата скрытая <div> отображается с помощью jQuery.

как прокрутить страницу вверх с помощью команды JavaScript/jQuery в этой функции? Желательно, даже если полоса прокрутки мгновенно перескакивает на вершину. Мне не нужна плавная прокрутка.

1311
javascript jquery scroll

30 ответов

Если вам не нужно изменение для анимации, вам не нужно использовать какие - либо специальные плагины-я бы просто использовал собственное окно JavaScript.scrollTo method -- passing in 0,0 мгновенно прокручивает страницу в левом верхнем углу.

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

параметры

  • x-coord-пиксель вдоль горизонтальной оси.
  • y-coord-пиксель вдоль вертикальной оси.
1800

Если вы хотите плавную прокрутку, попробуйте что-то вроде этого:

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

что будет принимать какие-либо <a> тег whose href="#top" и сделайте его плавным прокруткой вверх.

1201

попробуйте прокрутить это сверху

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

для этого вам не нужен jQuery. Стандартного тега HTML будет достаточно...

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

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

все эти предложения отлично подходят для различных ситуаций. Для тех, кто нашел эту страницу через поиск, можно также дать этой попробовать. JQuery, без плагина, прокрутите до элемента.

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

плавная прокрутка, чистый javascript:

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

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

в html

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

Если вы хотите сделать плавную прокрутку, попробуйте следующее:

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

другое решение-окно JavaScript.метод scrollTo :

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

параметры :

  • x-value-пиксель вдоль горизонтальной оси.
  • y-значение-это пиксель вдоль вертикальной оси.
23

С window.scrollTo(0, 0); очень быстро
поэтому я попробовал пример Mark Ursino, но в Chrome ничего не происходит
и я нашел это

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

протестированы все 3 браузера, и он работает
я использую blueprint css
это когда клиент нажимает кнопку" Забронировать сейчас " и не имеет выбранного периода аренды, медленно перемещается наверх, где находятся календари, и открывает диалог div, указывающий на 2 поля, после 3sec он исчезает

21

A много of пользователи рекомендуется выбирать теги html и body для кросс-браузерной совместимости, например:

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

это может споткнуться, хотя, если вы рассчитываете на обратный вызов работает только один раз. На самом деле он будет работать дважды, потому что вы выбрали два элемента.

если это проблема для вас, вы можете сделать что-то вроде этого:

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

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

причина этого работает в Chrome $('html').scrollTop() возвращает 0, но не в других браузерах, таких как Firefox.

если вы не хотите ждать завершения анимации в случае, если полоса прокрутки уже находится наверху, попробуйте следующее:

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

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

    callback();
}
21

действительно странно: этот вопрос активен в течение пяти лет, и до сих пор нет ванильного ответа JavaScript для анимации прокрутки... так что здесь вы идете:

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)

Если хотите, вы можете обернуть это в функцию и вызвать это через

19

старый #top может сделать трюк 

document.location.href = "#top";

отлично работает в FF, IE и Chrome

16

попробуй такое

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

$(document).scrollTop(0); тоже работает.

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

Edit:

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

Не-jQuery решение / чистый JavaScript:

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

это будет работать:

window.scrollTo(0, 0);

9

попробуйте этот код:

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

div => элемент Dom, куда вы хотите переместить прокрутку.

время => миллисекунды, определите скорость прокрутки.

8

почему бы вам не использовать встроенную функцию jQuery scrollTop:

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

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

коротко и просто!

7

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

вам не нужен JQuery. Просто вы можете вызвать скрипт

window.location = '#'

при нажатии кнопки "перейти к началу"

демо:

output.jsbin.com/fakumo#

PS: Не используйте этот подход, когда вы используете современные библиотеки, такие как angularjs. Это может нарушить URL-адрес hashbang.

6

вы можете просто использовать цель из своей ссылки, например #someid, где #someid-идентификатор div.

или вы можете использовать любое количество плагинов прокрутки, которые делают это более элегантным.

http://plugins.jquery.com/project/ScrollTo пример.

5

просто используйте этот скрипт для прокрутки до top direct.

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

вы можете попробовать использовать JS, как в этой скрипке http://jsfiddle.net/5bNmH/1/

добавьте кнопку "Перейти наверх" в нижний колонтитул страницы:

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

Если вы не хотите плавной прокрутки, вы можете обмануть и остановить плавную прокрутку анимации довольно много, как только вы запустите его... вот так:

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

Я понятия не имею, рекомендуется ли это/разрешено, но это работает:)

когда бы вы использовали это? Я не уверен, но, возможно, когда вы хотите использовать один клик, чтобы оживить одну вещь с помощью Jquery, но сделать другую без анимации? т. е. открыть слайд-панель входа администратора в верхней части страницы, и мгновенно перейти к началу видеть его.

4
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;
    });
}
4

ни один из ответов выше не будет работать в SharePoint 2016.

Это должно быть сделано так : https://sharepoint.stackexchange.com/questions/195870/

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

мотивация

это простое решение работает изначально и реализует плавную прокрутку в любую позицию.

это позволяет избежать использования якорных ссылок (те, с #), которые, на мой взгляд, полезны, если вы хотите связать с разделом, но не так удобны в некоторых ситуациях, особенно при указании на вершину, которая может привести к двум разным URL-адресам, указывающим на одно и то же место (http://www.example.org и http://www.example.org/#).

решение

поставить id к тегу, который вы хотите прокрутить, например, ваш первый раздел, который отвечает на этот вопрос, но id может быть размещен везде на странице.

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

затем в качестве кнопки вы можете использовать ссылку, просто отредактируйте onclick атрибут с таким кодом.

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

где аргумент document.getElementById - это id тега, который вы хотите прокрутки после клика.

4

все браузер. Удачи!--2--> 

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);
        }
3

попробуй такое

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