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

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

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

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

параметры

• X-координата - это пиксель вдоль горизонтальной оси.
• у-координата - это пиксель вдоль вертикальной оси.

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

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

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

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

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

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

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

Вам не нужен jQuery, чтобы сделать это. Стандартный HTML-тег будет достаточно ...

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

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

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

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

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

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

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

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

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

Другой способ прокрутки с верхним и левым полем:

window.scrollTo({ top: 100, left: 100, behavior: 'smooth' });

<script>

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

в HTML

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

Действительно странно: этот вопрос активен в течение пяти лет, и до сих пор нет ванильного ответа 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

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

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

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

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

Параметры:

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

С window.scrollTo(0, 0);очень быстро,
поэтому я попробовал пример Марка Урсино, но в 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 поля, через 3 секунды он исчезает

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

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

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

document.location.href = "#top";

Прекрасно работает в FF, IE и Chrome

Попробуй это

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

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

Решение без jQuery / чистый JavaScript:

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

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

window.scrollTo(0, 0);

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

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

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

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

Чистое решение JavaScript:

function scrollToTop() {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
});

Я пишу анимированное решение на Codepen

Также вы можете попробовать другое решение со scroll-behavior: smoothсвойством CSS .

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

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

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

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

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

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

window.location = '#'

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

Пример демо:

output.jsbin.com/fakumo#

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

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

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

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

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

мотивация

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

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

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

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

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

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

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

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

Это должно быть сделано так: /sharepoint/195870/

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