Как прокрутить страницу до определенного места на странице с помощью jquery?

Ответ 1

Плагин прокрутки jQuery

так как это вопрос с тегом jquery, я должен сказать, что эта библиотека имеет очень хороший плагин для плавной прокрутки, вы можете найти его здесь: http://plugins.jquery.com/scrollTo/

Выдержки из документации:

$('div.pane').scrollTo(...);//all divs w/class pane

или

$.scrollTo(...);//the plugin will take care of this

Пользовательская функция jQuery для прокрутки

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

$.fn.scrollView = function () {
    return this.each(function () {
        $('html, body').animate({
            scrollTop: $(this).offset().top
        }, 1000);
    });
}

и используйте его как:

$('#your-div').scrollView();

Прокрутите до координат страницы

Анимация html и body элементов с атрибутами scrollTop или scrollLeft

$('html, body').animate({
    scrollTop: 0,
    scrollLeft: 300
}, 1000);

Обычный javascript

прокрутка с помощью window.scroll

window.scroll(horizontalOffset, verticalOffset);

только для подведения итогов, используйте window.location.hash для перехода к элементу с идентификатором

window.location.hash = '#your-page-element';

Непосредственно в HTML (улучшения доступности)

<a href="#your-page-element">Jump to ID</a>

<div id="your-page-element">
    will jump here
</div>

Ответ 2

Да, даже в простом JavaScript это довольно легко. Вы указываете элемент id, а затем можете использовать его как "закладку":

<div id="here">here</div>

Если вы хотите, чтобы он прокручивался там, когда пользователь нажимает на ссылку, вы можете просто использовать метод try-and-true:

<a href="#here">scroll to over there</a>

Чтобы сделать это программно, используйте scrollIntoView()

document.getElementById("here").scrollIntoView()

Ответ 3

Нет необходимости использовать какой-либо плагин, вы можете сделать это следующим образом:

var divPosition = $('#divId').offset();

затем используйте это для прокрутки документа к конкретному DOM:

$('html, body').animate({scrollTop: divPosition.top}, "slow");

Ответ 4

Вот чистая версия javascript:

location.hash = '#123';

Он будет прокручиваться автоматически. Не забудьте добавить префикс "#".

Ответ 5

Обычный Javascript:

window.location = "#elementId"

Ответ 6

<div id="idVal">
    <!--div content goes here-->
</div>
...
<script type="text/javascript">
     $(document).ready(function(){
         var divLoc = $('#idVal').offset();
         $('html, body').animate({scrollTop: divLoc.top}, "slow");
     });
</script>

В этом примере показано, чтобы найти в этом случае отдельный идентификатор div i.e, 'idVal'. Если у вас есть последующие divs/tables, которые откроются на этой странице с помощью ajax, вы можете назначить уникальные divs и вызвать script для прокрутки к конкретному местоположению для каждого содержимого div.

Надеюсь, это будет полезно.

Ответ 7

<script type="text/javascript">
    $(document).ready(function(){
        $(".scroll-element").click(function(){
            $('html,body').animate({
                scrollTop: $('.our_companies').offset().top
            }, 1000);

            return false;
        });
    })
</script>

Ответ 8

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

<div id="divRegister"></div>

$(document).ready(function() {
location.hash = "divRegister";
});

Ответ 9

Вот вариант легкого подхода @juraj-blahunka . Эта функция не предполагает, что контейнер является документом и только прокручивает, если элемент отсутствует. Анимационная очередность также отключена, чтобы избежать ненужного подпрыгивания.

$.fn.scrollToView = function () {
    return $.each(this, function () {
        if ($(this).position().top < 0 ||
            $(this).position().top + $(this).height() > $(this).parent().height()) {
            $(this).parent().animate({
                scrollTop: $(this).parent().scrollTop() + $(this).position().top
            }, {
                duration: 300,
                queue: false
            });
        }
    });
};