Прокрутите страницу вверх, используя JavaScript / jQuery? - PullRequest
Новая
       129

Прокрутите страницу вверх, используя JavaScript / jQuery?

1440 голосов
/ 17 июля 2009

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

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

Ответы [ 37 ]

8 голосов
/ 20 марта 2016

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

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

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

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

8 голосов
/ 27 сентября 2017

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

<script>
$(document).ready(function(){
    $("button").click(function(){
        ($('body').scrollTop(0));
    });
});
</script>
7 голосов
/ 25 июня 2015

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

window.location = '#'

при нажатии кнопки «Перейти наверх»

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

output.jsbin.com / fakumo #

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

6 голосов
/ 09 мая 2018

Мотивация

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

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

6 голосов
/ 13 мая 2014

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

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

5 голосов
/ 17 июля 2009

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

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

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

4 голосов
/ 01 февраля 2014

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

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

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

var w = document.getElementById("s4-workspace");
w.scrollTop = 0;
4 голосов
/ 22 ноября 2014 
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;
    });
}
3 голосов
/ 19 октября 2015

Активен весь браузер. Удачи 

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);
        }
Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...