Блог

Я использую BootStrap 3 для создания одностраничного сайта. Чтобы перейти к разным частям страницы, я нахожу функцию плавной прокрутки в http://css-tricks.com/snippets/jquery/smooth-scrolling / и это работает нормально.

 $(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^//,'') == this.pathname.replace(/^//,'') amp;amp; 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
        }, 1000);
        return false;
      }
    }
  });
});
  

Плавная прокрутка обнаруживает ссылки, начинающиеся с #
<a href="#zone">Scroll to Section Zone</a>

Но ссылки, начинающиеся с #, также используются в Bootstrap Carousel
data-target="#myCarousel"
Таким образом, кнопки для перехода к предыдущему / следующему слайду в слайд-шоу ведут себя по-другому.

Я почти ничего не знаю о Javascript, но я понял, что вторая строка кода была о ссылках, которых следует избегать: поэтому я поместил «#myCarousel» в эту часть. Далее вы можете найти отредактированную вторую строку:

   $('a[href*=#]:not([href=#],"#myCarousel")').click(function() {
  

Мое решение (очень удивительное!) работает… почти работает!
Есть только еще одна проблема: прокрутка больше НЕ плавная.
При нажатии на кнопку страница переходит по целевой ссылке.

Есть идеи, почему это не более гладко?

Решение найдено

Спасибо за все ответы.
Перед отправкой этого запроса я выполнил поиск в jquery api

Я нахожу решение: теперь вторая строка читается
$('a[href*=#]').not("[href=#], [href=#myCarousel]").click(function() {

Вы уничтожили функцию javascript, потому что ваш :not селектор написан неправильно. Поэтому плавная прокрутка больше не работает. Попробуйте сделать это так:

 $('a[href*=#]:not(#myCarousel)').click(function() {
  

:not CSS selector Подробнее о

Проблема здесь в том, что ваш селектор не работает нормально.

Если вы откроете окно консоли и попытаетесь написать:

$('a[href*=#]:not([href=#],"#myCarousel")')

вы увидите, что результатом является ошибка, из-за этого функция smoothscrolling не работает, и поведение по умолчанию при прямом отображении ссылок отключается.

Подробнее о селекторе .not() движка jQuery Sizzle читайте здесь .

Попробуйте :

 $('a[href*=#]').not('[href=#]','#myCarousel').click(function() {
  

При этом выбираются следующие ссылки:

1. Все a теги, содержащие # внутри них.
2. Отсутствие href набора непосредственно для #
3. Не находится внутри #myCarousel