Можно ли прокручивать до определенного места на странице с помощью jQuery?
Должно ли место, которое я хочу прокрутить, иметь:
<a name="#123">here</a>
Или может ли он просто перейти к определенному идентификатору DOM?
Можно ли прокручивать до определенного места на странице с помощью jQuery?
Должно ли место, которое я хочу прокрутить, иметь:
<a name="#123">here</a>
Или может ли он просто перейти к определенному идентификатору DOM?
Плагин прокрутки 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>
Да, даже в простом JavaScript это довольно легко. Вы указываете элемент id, а затем можете использовать его как "закладку":
<div id="here">here</div>
Если вы хотите, чтобы он прокручивался там, когда пользователь нажимает на ссылку, вы можете просто использовать метод try-and-true:
<a href="#here">scroll to over there</a>
Чтобы сделать это программно, используйте scrollIntoView()
document.getElementById("here").scrollIntoView()
Нет необходимости использовать какой-либо плагин, вы можете сделать это следующим образом:
var divPosition = $('#divId').offset();
затем используйте это для прокрутки документа к конкретному DOM:
$('html, body').animate({scrollTop: divPosition.top}, "slow");
Вот чистая версия javascript:
location.hash = '#123';
Он будет прокручиваться автоматически. Не забудьте добавить префикс "#".
Обычный Javascript:
window.location = "#elementId"
<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.
Надеюсь, это будет полезно.
<script type="text/javascript">
$(document).ready(function(){
$(".scroll-element").click(function(){
$('html,body').animate({
scrollTop: $('.our_companies').offset().top
}, 1000);
return false;
});
})
</script>
Попробуйте это
<div id="divRegister"></div>
$(document).ready(function() {
location.hash = "divRegister";
});
Вот вариант легкого подхода @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
});
}
});
};