автопрокрутка в главном контейнере при нажатии на элемент панели навигации

0

Я разрабатываю новый блог. На индексной странице я покажу нет. блогов (скажем, 10). Основной контейнер отобразит заголовок и описание блога.

У меня есть правильный навигатор, который показывает все заголовки (только заголовки, а не описание). Я хочу следующие две вещи

  1. Заголовок (в боковой навигационной панели), который отображается в основном контейнере, будет автоматически подсвечиваться.
  2. Если я нажимаю на какой-либо заголовок, страница должна автоматически прокручиваться так, чтобы этот блог показывался пользователю.

Я видел, что это реализовано на большом количестве страниц. Может ли кто-нибудь сказать мне, как это реализовать?

Я использую следующие библиотеки JavaScript/CSS

  1. JQuery
  2. Twitter bootstrap3
Теги:
twitter-bootstrap-3

1 ответ

1
  1. Для этой части есть куча jquery-решений. Вот один: как я могу выделить выбранный элемент списка с помощью jquery?

  2. Я успешно использовал следующий скрипт в Boostrap 3.0. Пока вы добавляете индикатор id (hashtag) в href в li:

    <li><a href="#profile">PROFILE</a></li>
    

Как и тот же идентификатор для div:

<div class="row" id="profile">

Этот скрипт будет работать:

<script>
  $(function() {
    $('ul#nav > li > a[href*=#]:not([href=#])').click(function() {
      if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
      || location.hostname == this.hostname) {

    var target = $(this.hash);
    target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
    if (target.length) {
      $('html,body').animate({
        scrollTop: target.offset().top - 200
      }, 2000);
      return false;
      }
    }
   });
  });
</script>

Ещё вопросы

Сообщество Overcoder
Наверх
Меню