Выделите div с помощью jquery

Во-первых, ваш код не содержит contact div, у него есть div div!

На боковой панели у вас есть contact в div внизу страницы, с которой у вас есть contacts . Я удалил окончательный s для образца кода. (вы также ошибочно написали идентификатор projectlink на боковой панели).

Во-вторых, ознакомьтесь с некоторыми примерами для перехода на страницу справки jQuery. Вы должны использовать click like, object.click( function() { // Your code here } ); чтобы связать обработчик события клика с объектом … Как в моем примере ниже. В стороне вы также можете просто вызвать щелчок по объекту, используя его без аргументов, например object.click() .

В-третьих, scrollTo является плагином в jQuery. Я не знаю, установлен ли плагин. Вы не можете использовать scrollTo() без плагина. В этом случае желаемая функциональность – всего 2 строки кода, поэтому я не вижу причин использовать плагин.

Хорошо, теперь к решению.

Приведенный ниже код будет прокручиваться до правильного div, если вы нажмете ссылку на боковой панели. Окно должно быть достаточно большим, чтобы разрешить прокрутку:

 // This is a functions that scrolls to #{blah}link function goToByScroll(id) { // Remove "link" from the ID id = id.replace("link", ""); // Scroll $('html,body').animate({ scrollTop: $("#" + id).offset().top }, 'slow'); } $("#sidebar > ul > li > a").click(function(e) { // Prevent a page reload when a link is pressed e.preventDefault(); // Call the scroll function goToByScroll(this.id); }); 

Живой пример

(Прокрутите до функции, взятой отсюда )

PS: Очевидно, что у вас должна быть веская причина идти по этому маршруту вместо использования якорных тегов blah … blah title

В .scrollTo() нет .scrollTo() , но есть .scrollTop() . .scrollTop ожидает параметр, то есть значение пикселя, в котором должна прокручиваться полоса прокрутки.

Пример:

 $(window).scrollTop(200); 

прокрутит окно (если в нем будет достаточно содержимого).

Таким образом, вы можете получить это нужное значение с помощью .offset() или .position() .

Пример:

 $(window).scrollTop($('#contact').offset().top); 

Это должно прокрутить элемент #contact в представлении.

Альтернативный метод non-jQuery – .scrollIntoView() . Вы можете вызвать этот метод для любого DOM element например:

 $('#contact')[0].scrollIntoView(true); 

true указывает, что элемент расположен сверху, а false в нижней части windows. Хорошая вещь с помощью метода jQuery, вы можете даже использовать его с fx functions такими как .animate() . Поэтому вы можете сгладить прокрутку.

Ссылка: .scrollTop () , .position () , .offset ()

можешь попробовать :

 $("#MediaPlayer").ready(function(){ $("html, body").delay(2000).animate({ scrollTop: $('#MediaPlayer').offset().top }, 2000); }); 

Добавьте эту небольшую функцию и используйте ее так: $('div').scrollTo(500);

 jQuery.fn.extend( { scrollTo : function(speed, easing) { return this.each(function() { var targetOffset = $(this).offset().top; $('html,body').animate({scrollTop: targetOffset}, speed, easing); }); } }); 

Хорошо, ребята, это небольшое решение, но оно отлично работает.

предположим, что следующий код:

 
 
1st post
 
2nd post
 
3rd post
  

вы хотите, когда новое сообщение добавляется в «the_div_holder», тогда он прокручивает его внутреннее содержимое (вкладка div.) до последнего, как чат. Итак, делайте следующее, когда в основной держатель div добавляется новый .post:

 var scroll = function(div) { var totalHeight = 0; div.find('.post').each(function(){ totalHeight += $(this).outerHeight(); }); div.scrollTop(totalHeight); } // call it: scroll($('#the_div_holder')); 

Сначала получите позицию элемента div, до которого вы хотите прокручивать метод jQuery position ().
Пример: var pos = $ (“div”). Position ();
Затем получите y cordinates (height) этого элемента с методом « .top ».
Пример: pos.top;
Затем возьмите x cordinates этого элемента div с методом « .left ».
Эти методы основаны на позиционировании CSS.
Как только мы получим x & y cordinates, мы можем использовать scrollTo () javascript ; метод.
Этот метод прокручивает документ до определенной высоты и ширины.
Он принимает два параметра, как x & y cordinates. Синтаксис: window.scrollTo (x, y);
Затем просто передайте x & y cordinates элемента DIV в функции scrollTo () .
См. Пример ниже ↓ ↓

          Click here to scroll  
 The DIV element.