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

130
задан Juraj Blahunka 22 February 2010 в 23:54
поделиться

3 ответа

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

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

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

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

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

document.getElementById("here").scrollIntoView()
126
ответ дан 24 November 2019 в 00:07
поделиться

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

location.hash = '#123';

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

21
ответ дан 24 November 2019 в 00:07
поделиться

Плагин jQuery Scroll

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

Excerpts from Documentation:

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

or

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

Custom jQuery function for scrolling

you can use a very lightweight approach by defining your custom scroll jquery function

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

and use it like:

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

Scroll to a page coordinates

Animate html and body elements with scrollTop or scrollLeft attributes

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

Plain javascript

scrolling with window.scroll

window.scroll(horizontalOffset, verticalOffset);

only to sum up, use the window.location.hash to jump to element with ID

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

Directly in HTML (accesibility enhancements)

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

<div id="your-page-element">
    will jump here
</div>
240
ответ дан 24 November 2019 в 00:07
поделиться
Другие вопросы по тегам:

Похожие вопросы: