Да, даже в простом JavaScript это довольно просто. Вы присваиваете элементу идентификатор, а затем можете использовать его как «закладку»:
<div id="here">here</div>
Если вы хотите, чтобы он прокручивался туда, когда пользователь щелкает ссылку, вы можете просто использовать проверенный метод:
<a href="#here">scroll to over there</a>
Чтобы сделать это программно, используйте scrollIntoView ()
document.getElementById("here").scrollIntoView()
Вот чистая версия javascript:
location.hash = '#123';
Она будет прокручиваться автоматически. Не забудьте добавить префикс "#".
Плагин 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>