javascript - scrollintoview - прокрутка страницы js




Перейдите в начало страницы с помощью JavaScript/jQuery? (20)

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

Как перейти к началу страницы с помощью команды JavaScript / 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 - это идентификатор тега, который вы хотите прокрутить после клика.


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

window.location = '#'

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

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

output.jsbin.com/fakumo#

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


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

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

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

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


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

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

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

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

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

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


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

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


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

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

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

Это нужно сделать следующим образом: https://sharepoint.stackexchange.com/questions/195870/

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

Попробуй это

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

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

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

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

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


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

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

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


гладкий свиток, чистый javascript:

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

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


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

window.scrollTo(0, 0);


lot users рекомендуют выбирать теги 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();
}

<script>

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

в html

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

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

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

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




scroll