/ Сайтостроение / Scripts & jquery / Плавный скроллинг колесом

Плавный скроллинг колесом

HIT

29.09.2015

2564

Сайт воспринимается более профессионально, если на нем реализована плавная прокрутка колесом.

Игнорируются при наведении дополнительные области со скроллингом, т.е. проматывается сама страница, а не область

Все это надо поместить в подвал: скрипт, инициализация скрипта.

<script src="<?php bloginfo('stylesheet_directory'); ?>/js/plugins-scroll.js"></script>
<script>
// Skroll-page
$(document).ready(function() {
//Chrome Smooth Scroll
try {
$.browserSelector();
if($("html").hasClass("chrome")) {
$.smoothScroll();
}
} catch(err) {

};

});</script>

Изначально требовалось подключение версии jquery
<script src=»https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js»></script>
но при этом были конфликты с другими версиями jquery и как следствие глючили различные плагины и модули

Нормально работает при добавлении в файл funсtions такого кода (правильная загрузка версий jquery)

// Правильное подключение библиотеки jquery

add_action( 'wp_enqueue_scripts', 'my_load_scripts' );
/**
* Подключаем jQuery из гугла
*/
function my_load_scripts() {

if( !is_admin() ) {
wp_deregister_script( 'jquery-core' ); // отключаем только jquery без jquery-migrate
wp_register_script( 'jquery-core', '//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js', array(), null, true ); // регистрируем крайнюю версию из гугла
add_filter( 'script_loader_src', 'jquery_local_loader', 10, 2 ); // вешаем на загрузку скрипта альтернативный jquery
wp_enqueue_script( 'jquery' );
}

}



// проверяем загрузилась библиотека и если нет грузим локальную из вордпресс
add_action( 'wp_head', 'jquery_local_loader' );

function jquery_local_loader( $src, $handle = null ) {

static $add_jquery_fallback = false;

if( $add_jquery_fallback ) {
echo '<script>window.jQuery || document.write(\'<script src="' . includes_url() . 'js/jquery/jquery.js"><\/script>\')</script>' . "\n";
$add_jquery_fallback = false;
}

if( $handle === 'jquery-core' ) {
$add_jquery_fallback = true;
}

return $src;

}

// для маньяков безопасности отключаем версии скриптов
function port_remove_cssjs_ver( $src ) {
if( strpos( $src, '?ver=' ) )
$src = remove_query_arg( 'ver', $src );
return $src;
}

add_filter( 'script_loader_src', 'port_remove_cssjs_ver', 10, 2 );

Еще один альтернативный скрипт плавной прокрутки, не требующий ничего дополнительного, помещаем в подвал

<script type='text/javascript' src='http://liderstroy-ug.ru/wp-content/themes/f-shop/scripts/smooth-scrollbar.js'></script>

Иногда возникают проблемы с тем что не колесо не реагирует (в Opere) — чтобы это устранить надо обновить историю (кэш, куки) браузера

Перестает работать функция браузера увеличение/уменьшение страницы при нажатии cnrl + колесо мыши. Альтернатива: масштабировать cnrl + кнопки +/-

Плагин MouseWheel Smooth Scroll

Этот же функционал предоставляет плагин MouseWheel Smooth Scroll (6 000 установок). В плагине всего две настройки: Step (сила прокрутки) и Speed (скорость прокрутки) (по умолчанию 100 / 400, я ставлю 150 / 500).

Тэги:

Поделится информацией с друзьями

  • Похожие записи
  • Комментарии
  • Вложения
Прокрутка страницы вверх и вниз

Прокрутка страницы вверх и вниз

Очень нужная «фишка» на сайте — стрелка прокрутки вверх, особенно если страницы получаются довольно длинными, !особенно если на сайте нет прилепленного header. Вставляем в самый низ, перед wp_footer <p id="Go_Top"><a Читать далее »

Изменение объекта при скроллинге

Изменение объекта при скроллинге

Учимся использовать jquery эффекты при скроллинге. Данные эффекты чаще всего применяются на промо-страницах и лэндингах. ScrollMe Скрипт Scrollme состоит из одного файла с набором скриптов, подключаем его wp_enqueue_script( 'scrollme', get_template_directory_uri() Читать далее »

Модальное окно на jquery

Модальное окно на jquery

Создаем модальное (всплывающее) окно основанное на технологии jquery. Про подобное решение на чистом CSS читайте здесь. Принцип модального окна Вставляем в HEADER (выше всего контента), #backfon — это фон модального Читать далее »

/

Добавить комментарий

Пока нет комментариев. Будь первым!

Плавный скроллинг колесом
Резервные копии сайта
Рекомендации для васРезервные копии сайтаOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.