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

Question

Можно ли прокручивать до определенного места на странице с помощью jQuery?

ли место я хочу прокрутки, чтобы иметь:

<a name="#123">here</a> 

Или это может просто перейти к конкретному DOM ид?

Answer 1

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

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

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

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

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

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

Answer 2

Вот чистый Javascript версия:

location.hash = '#123'; 

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

Answer 3

JQuery Scroll Plugin

, так как это вопрос с тегом 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(); 

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

Animate html и body элементы с scrollTop или scrollLeft атрибуты

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

Plain Javascript

скроллинг с window.scroll

window.scroll(horizontalOffset, verticalOffset); 

только подводить итоги, использовать window.location.hash, чтобы перейти к элементу с ID

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> 

Answer 4

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

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

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

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

Answer 5

<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> 

Этот пример показывает, чтобы найти к определенному ДИВ ид т.е., «idVal» в этом случае. Если у вас есть последующие divs/tables, которые откроются на этой странице с помощью ajax, вы можете назначить уникальные divs и вызвать скрипт для перехода к конкретному местоположению для каждого содержимого div.

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

Answer 6

Plain Javascript:

window.location = "#elementId" 

Answer 7

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

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

Answer 8

Вот вариант легкий подход @ Юрай-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 
      }); 
     } 
    }); 
}; 

Answer 9

Попробуйте

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

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