Плавный переход/скроллинг к якорю

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

Для реализации данного эффекта, нам нужно всего лишь прописать нижеприведенный  код в любую часть HTML документа (лучше на начале) и скопировать библиотеки jQuery для скроллинга в папку, где находится HTML файл страницы. Скачать библиотеки jQuery для скроллинга.

Вот код, который надо вставить в ваш HTML документ.

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.localscroll.js"></script>
<script type="text/javascript" src="jquery.scrollto.js"></script>
<script type="text/javascript">
$(function($) {
 $.localScroll({
  duration: 1000,
  hash: false });
 });
</script>

Где duration: 1000, это время перехода.

Обратите внимание, что эффект плавного перехода действует на все якоря в странице.

Код и  библиотеки jQuery взяты c сайта расширений WYSIWYG Web Builder. Вот страница самого плагина Smooth Scroll 2

  • Арбуз

    В Хроме 29 на Винде не работает.

    • jetpeks

      У меня на этом сайте работает http://elefant-art.com/

      • Andr

        Шо ты рассказываешь, у тебя там что, обычные якори?

        $(«#indexRollOver10 a»).hover(function()
        {
        $(this).children(«span»).stop().fadeTo(300, 0);
        }

        • jetpeks

          да

  • Галина

    Добрый вечер!
    Как сделать так, чтобы эффект был у нескольких якорей?

    • jetpeks

      он работает к любому количеству якорей

      • Галина

        Не совсем правильно задала вопрос… Имею в виду: как сделать так, чтобы эффект был у конкретных якорей, а не у всех?

  • Олег Нечай

    Да, спасибо!
    Все само работает, и во всех браузерах, и всех направлениях )

  • Alina Nikolaenko

    Автор ГАНДОН!!! Статья ОПУБЛИКОВАНОИюл 23rd, 2012. А jQuery блядь 1.4.1?? Сука а почему тогда уже не 1.0.1??? Или вообще может быть печеньку для беты написал? НАХУЙ твое морально и физически устаревшее дерьмо засоряет индес? блогеры… как вы сука заебали блядь своими высерами! А индекс то блядь воняет долго…

  • igorlend

    Конечно матюкаться так не нужно, но эта штука и правда не работает. 1) сайт сделан с якорями в меню 2) дабы исключить ошибку muse, через тотал коммандер внес изменения в index.html и в папке на сервере скрипты, добавил скрипты *выше скачанные* 3) в index.html естественно указал путь к скриптам правильный перепроверял 2 раза. 4)на сайте http://elefant-art.com нажимая на пункт меню видим мгновенный переход, а при прокрутке прокрутка. Итог после проделанной работы ничего с моим одностраничным сайтом нового не произошло. Вывод делаем сами.

  • http://portretudachi.com Anastasya Krasnova

    Спасибо!!! Заработала «адская машинка»! Три дня искала, как сделать плавный скроллинг по странице, так чтобы работало. Очень удобные библиотеки — для «непрограммистов».

  • Николай Гундяк

    Горизонтальный скроллинг не работает к сожалению.


Занесено в каталог Deport.ru
Return to Top ▲Return to Top ▲