0

Добрый вечер.

Столкнулся с такой проблемой.
При подключении двух скриптов один из них перестает работать (в FireFox работают оба).
Один из них это FancyBox, а второй плавный переход к якорю на странице.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js" type="text/javascript"></script>

С этим скриптом работает переход, но не работает FancyBox:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>

С этим наоборот - FancyBox работает, а переход не хочет.
Вроде бы одна библиотека старше другой, значит с более новой должны работать оба скрипта, но не работают.
Может, кто подскажет, что не так делаю?

1 ответ 1

4

Скачайте последние версии плагинов и используйте лучше эту версию jQuery:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>

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

  link.click(function(e){ // link - это ссылка на которую нажимают
    var href = $(this).attr("href"),
      offsetTop = href === "#" ? 0 : $(href).offset().top + 1;
    $('html, body').stop().animate({
        scrollTop: offsetTop
    }, 300);
    e.preventDefault();
  });

UPD Небольшая добавка по link.

Линк в данном случае это ссылка, которая ведёт на якорь с нужным местом. К примеру, у вас есть такой код в HTML:

  <div id="siteNav">
    <ul class="nav">
      <li><a href="#blockOne">Блок 1</a></li>
      <li><a href="#blockTwo">Блок 2</a></li>
      <li><a href="#blockThree">Блок 3</a></li>
    </ul>
  </div>
  <div class="content">
     <div id="blockOne">Какой-то текст</div>
     <div id="blockTwo">Какой-то текст</div>
     <div id="blockThree">Какой-то текст</div>
  </div>

В JS можно так найти link:

var link = $('#siteNav').find('a'); // а дальше тот код что я написал выше

И вот что из этого всего получается.

4
  • Сильно не ругайтесь, я с JS пока еще на "Вы", поэтому не могли бы объяснить, как подключить данный код к нужному месту. Как я это понял: код, который Вы написали, вставить в <head>, это ясно, а вот к нужному элементу что пописывать, id="link" ? И можно ли изменять скорость перехода в данном случае? Спасибо. (= 18 янв 2015 в 19:44
  • @RedColdPussyJuice, обновил ответ
    – MasterAlex
    18 янв 2015 в 20:50
  • Значение 300 в скрипте это скорость перехода в миллисекундах, можно менять на любое необходимое значение
    – MasterAlex
    18 янв 2015 в 20:56
  • Спасибо Вам большое! Все работает на отлично! Буду теперь использовать этот простой и удобный вариант. Благодарю! 18 янв 2015 в 21:23

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.