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

поэтому у меня есть страница с фиксированной панелью ссылок на стороне. Я бы хотел прокрутить список до разных div. В основном страница – это только один длинный веб-сайт, где я бы хотел прокрутить список до разных разделов, используя окно меню в сторону.

Вот jquery, который у меня есть

$(document).ready(function() { $('#contactlink').click = function() { $(document).scrollTo('#contact'); } }); 

Проблема в том, что он автоматически переходит в контактный div, когда он загружается, а затем, когда я #contactlink в меню, он прокручивается назад.

EDIT: HTML

      <script src = "assets/js/jquery.js">  <script src = "assets/js/pagetwo.js"> <link rel="stylesheet" type="text/css" href="assets/css/reset.css" />  <link rel="stylesheet" type="text/css" href="assets/css/pagetwo.css"/>  <!-- Insert Title -->   

uck

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Projects

Projects

Resume

Resume

Contact

Contact

Спасибо за помощь

Во-первых, ваш код не содержит 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: Очевидно, что у вас должна быть веская причина идти по этому маршруту вместо использования якорных тегов blahblah 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 () .
См. Пример ниже ↓ ↓

     Scroll upto Div with jQuery.       
The DIV element.
  • Плавный скроллер на основе положения мыши (JQuery)
  • ipad safari: отключить прокрутку и эффект отскока?
  • Как прокрутить строку таблицы в виде (element.scrollintoView) с помощью jQuery?
  • Android WebView внутри ScrollView прокручивает только scrollview
  • Трюки для улучшения производительности прокрутки iPhone UITableView?
  • Сохранять / сохранять / восстанавливать позицию прокрутки при возврате в ListView
  • Вырезать пробелы с конца NSString
  • Более эффективный способ обработки функций $ (window) .scroll в jquery?
  • мобильное хромирование огней событие изменения в прокрутке
  • Различать прокрутку вверх / вниз в jquery?
  • Как я могу использовать автоматическую прокрутку ListBox при добавлении нового элемента?
  • Interesting Posts

    Каково ключевое слово ‘function’, используемое в некоторых сценариях bash?

    Ошибка раздувания classа android.support.design.widget.NavigationView

    Драйвер Microsoft ACE изменяет точность с плавающей запятой в остальной части моей программы

    Преобразование DataTable в общий список в C #

    jQuery .bind () vs. .on ()

    Как избежать потери текущих веб-сайтов браузеров при перенаправлении с помощью беспроводных страниц входа в систему

    RadioButton – как использовать пользовательский ansible?

    Диспетчер задач Windows 8 без повышения?

    Разница между Lookup () и словарем (из списка ())

    Поиск / сортировка файлов и папок на основе того, когда они были доступны / открыты

    Entity Framework 4.2 exec sp_executesql не использует индексы (sniffing параметров)

    Устанавливает ли Windows нераспределенное (неформатированное) пространство на SSD?

    ASP.NET MVC: пользовательская проверка по DataAnnotation

    неизвестная ошибка: Chrome не удалось запустить: анонимно вышел (информация о драйвере: chromedriver = 2.9

    Каков самый простой способ получить горячую клавишу yhy-mm-dd hh: mm: ss timestamp на Mac?

    Давайте будем гением компьютера.