Прокрутить до верхней части страницы с помощью JavaScript?

У меня есть элемент <button> на странице, когда эта кнопка нажата, скрытый элемент <div> отображается.

Как мне прокрутить до верхней части страницы, используя JavaScript? Желательно, даже если полоса прокрутки мгновенно прыгает наверх. Я не ищу плавной прокрутки.

+1494
источник поделиться
40 ответов
  • 1
  • 2

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

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

Параметры

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

Если вам нужна гладкая прокрутка, попробуйте что-то вроде этого:

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

Это займет любой тег <a>, чей href="#top" и сделает его гладким, прокрутите вверх.

+1301
источник

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

<script>
 $(document).ready(function(){
    $(window).scrollTop(0);
});
</script>
+166
источник

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

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

<a target="#jump_to_me">Click Here To Destroy The World!</a>
+98
источник

Лучшее решение с плавной анимацией:

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

Ссылка: https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo#Example

+77
источник

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

$('html, body').animate({
    scrollTop: $("#elementID").offset().top
}, 2000);
+60
источник

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

(function smoothscroll(){
    var currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
    if (currentScroll > 0) {
         window.requestAnimationFrame(smoothscroll);
         window.scrollTo (0,currentScroll - (currentScroll/5));
    }
})();
+38
источник
<script>

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

в html

<a href="#top">go top</a>
+28
источник

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

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

Другим решением является метод JavaScript window.scrollTo:

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

Параметры:

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

Действительно странный: этот вопрос активен уже пять лет, и все еще нет ответа на ванильный 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)

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

Примечание. Это очень простое решение и, возможно, не самое эффективное. Очень подробный пример можно найти здесь: https://github.com/cferdinandi/smooth-scroll

+25
источник

С 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 браузера, и он работает
я использую чертеж css
это когда клиент нажимает кнопку "Забронировать сейчас" и не имеет выбранного периода аренды, медленно перемещается вверху, где находятся календари, и открывает диалоговое окно div, указывающее на 2 поля, после 3 секунд он исчезает

+24
источник
<script>
$(function(){
   var scroll_pos=(0);          
   $('html, body').animate({scrollTop:(scroll_pos)}, '2000');
});
</script>

Редактировать:

$('html, body').animate({scrollTop:(scroll_pos)}, 2000);
+22
источник

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

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

Это может вас пошевелить, хотя если вы рассчитываете, что ваш 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();
}
+22
источник

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

document.location.href = "#top";

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

+18
источник

Попробуйте это

<script>
    $(window).scrollTop(100);
</script>
+14
источник

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

+14
источник

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

document.body.scrollTop = document.documentElement.scrollTop = 0;
+13
источник

$(".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>
+13
источник

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

window.scrollTo(0, 0);

+11
источник

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

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

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

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

+10
источник

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

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

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

Короче и просто!

+8
источник

Просто используйте этот script для прямой прокрутки вверх.

<script>
$(document).ready(function(){
    $("button").click(function(){
        ($('body').scrollTop(0));
    });
});
</script>
+8
источник

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

   $(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, но сделать другую без анимации? т.е. открыть панель входа администратора в верхней части страницы и мгновенно перейти к ней, чтобы увидеть ее.

+7
источник

Вам не нужен JQuery. Просто вы можете вызвать script

window.location = '#'

при нажатии кнопки "Вверх"

Пример демонстрации:

output.jsbin.com/fakumo#

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

+7
источник

мотивация

Это простое решение работает изначально и обеспечивает плавный переход к любой позиции.

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

Решение

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

<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 - это идентификатор тега, на который вы хотите перейти после щелчка.

+6
источник

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

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

http://plugins.jquery.com/project/ScrollTo является примером.

+5
источник

Вы можете попробовать использовать JS, как в этом Fiddle 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
источник
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
источник

Включить весь браузер. Удачи.

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
источник
  • 1
  • 2

Посмотрите другие вопросы по меткам или Задайте вопрос