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

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

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

Ответ 1

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

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

Параметры

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

Ответ 2

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

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

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

Ответ 3

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

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

Ответ 4

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

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

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

Ответ 5

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

// 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

Ответ 6

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

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

Ответ 7

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

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

Ответ 8

<script>

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

в html

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

Ответ 9

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

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

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

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

Параметры:

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

Ответ 10

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

Ответ 11

С 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 секунд он исчезает

Ответ 12

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

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

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

Ответ 13

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

Ответ 14

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

document.location.href = "#top";

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

Ответ 15

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

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

Ответ 16

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

Ответ 17

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

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

Ответ 18

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

Ответ 19

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

window.scrollTo(0, 0);

Ответ 20

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

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

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

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

Ответ 21

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

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

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

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

Ответ 22

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

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

Ответ 23

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

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

Ответ 24

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

window.location = '#'

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

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

output.jsbin.com/fakumo#

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

Ответ 25

мотивация

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

Он избегает использования якорных ссылок (с #), которые, на мой взгляд, полезны, если вы хотите сделать ссылку на раздел, но не очень удобны в некоторых ситуациях, особенно если указывать на верхнюю часть, что может привести к двум различным 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 - это идентификатор тега, на который вы хотите перейти после щелчка.

Ответ 26

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

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

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

Ответ 27

Вы можете попробовать использовать 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>

Ответ 28

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

Ответ 29

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

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

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

Ответ 30

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

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