Кнопки і плавна прокрутка вгору і вниз сторінки.
У цій замітці показаний простий і вельми елегантний приклад реалізації кнопок "Вгору" та "Вниз" без використання картинок, і варіант невеликого скрипта jQuery для плавної прокрутки сторінки в зазначеному напрямку.
Спосіб хороший тим, що спочатку, коли сторінка піднята вгору, кнопка "Вгору" прихована, коли прокручена до низу - прихована кнопка "Вниз", параметри висоти, на якій з'являються кнопки регулюється.
DEMO
Отже, HTML код кнопок виглядає так:
Для реалізації покажчиків напрямку прокрутки - стрілок, застосовуються спецсимволи юнікода, які просто копіюються і вставляються всередині тега. Такий підхід дозволяє обійтися без використання зображень, додаючи плюс до оптимізації, а також дозволяючи легко налаштувати і, в разі потреби, швидко змінити зовнішній вигляд кнопок.
При використанні стандартних спецсимволов в дизайні елементів сайту потрібно зробити дві перевірки:
1) перевірити кодування веб-сторінки - повинна бути UTF-8;
2) перевірити даний символ на кроссбраузерность - чи відображається він у всіх браузерах, буває, що немає;
HTML-код розміщуємо де зручно в шаблоні, зовнішній вигляд і розташування кнопок задається в CSS (код стилю з демонстраційної сторінки):
go-up. go-down display: none;
position: fixed; / * Позиціонування * /
z-index: 9999; / * Поверх все елементів на сторінці * /
right: 15%; / * Положення на сторінці, якщо зліва - left * /
background: # 4F4F4F;
border: 1px solid #ccc;
border-radius: 5px;
cursor: pointer;
color: #fff;
text-align: center;
font: normal normal 42px / 42px sans-serif;
text-shadow: 0 1px 2px # 000;
opacity. 5;
padding: 3px;
margin-bottom: 5px;
width: 42px;
height: 42px;
>
.go-up
.go-down
.go-down: hover,
.go-up: hover opacity: 1;
box-shadow: 0 5px 0.5em -1px # 666;
>
Завдяки фіксованому позиціонуванню кнопки будуть знаходиться, так би мовити, завжди під рукою, і тепер залишається тільки додати скрипт jQuery, який при натисканні буде плавно прокручувати сторінку в вгору або вниз:
$ (Function () if ($ (window) .scrollTop ()> = "250") $ ( "# ToTop") .fadeIn ( "slow")
$ (Window) .scroll (function () if ($ (window) .scrollTop ()<="250") $("#ToTop ").fadeOut("slow")
else $ ( "# ToTop") .fadeIn ( "slow")
>);
if ($ (window) .scrollTop ()<=$(document).height()-"999") $("#OnBottom ").fadeIn("slow")
$ (Window) .scroll (function () if ($ (window) .scrollTop ()> = $ (document) .height () - "999") $ ( "# OnBottom") .fadeOut ( "slow")
else $ ( "# OnBottom") .fadeIn ( "slow")
>);
Значення 250 в скрипті, показує:
- в першому рядку - кнопка з'явиться коли сторінка буде прокручена більше ніж на 250 пікселів;
- в другій, що зникне коли до верху сторінки залишиться менше ніж 250 пікселів.
На цьому поки що все, дякую всім за увагу.
У стандартному шаблоні він, жіквері, ні у кого не підключений, його треба підключати самостійно. Я цей момент опустив, тому що думаю це само-собою зрозуміло, але тепер думаю варто оновити статтю і додати цей пункт. Дякую за коригування.
Не знаю як присутні, а у мене в школі інформатика була та ще: ми вивчали Бейсік, лінії креслили завдяки формулами, а мишок в очі не бачили)) Тому комп'ютерної грамотності вчуся сама, в тому числі і тому, що стосується блогу. Так ось, стрілочки це зручно безперечно. Але ж реально вони не потрібні, коли знаєш малесеньку хитрість (виявлена випадково, працює скрізь)
Якщо натиснути на коліщатко у мишки в будь-якому місці тексту (крім зображення і посилання), то з'явиться "щось" в кружечку і при русі мишкою вгору або вниз, а іноді і в сторони сторінка перемотано. Залежно від того, як далеко від центру відведете курсор, швидкість збільшується або зменшується. Безсумнівний плюс цього нехитрого методу в тому, що зупинити можна в будь-якому місці і в будь-який момент. А стрілочки тільки до самого верху або до самого низу.
Але ви звичайно молодець що діліться такій важливій і корисною інформацією, за що вам величезне спасибі.
Ну що ви! Не варто вибачатися, все ви правильно помітили, а з особистого досвіду я можу сказати одне, що "простим" людям не потрібна інформація їм потрібен готовий результат: скопіював - вставив - радієш. Але у цього способу є дуже багато недоліків, по-цьому я просто перестав писати такі пости і дублювати одноманітний контент, якого в мережі вже "over 99999999999" відповідей, як би популярно це не було.
У кого підключена jQuery, а вона підключена вже всюди напевно. Блін як сформулювати взагалі при додаванні jQuery переставав працювати lightbox без додавання jQuery не працював сам скролл я вже відмовився від цього класного скролла я в скриптах НЕ шарю. І почав тестувати інші варіанти благо сайтів море і обурило мене що ось якийсь убогий скролл працює, причому використовуючи ту ж jQuery і цей ось класний немає. Методом тику і танці з бубном замінив всі долари $ на слово jQuery і все запрацювало і lightbox і скролл додавати бібліотеку додатково не треба
ще радив би скрипти jQ розміщувати в конструкції типу:
(Function ($) $ (Function () // ТУТ ОДИН ВЕЛИКИЙ JQUERY СКРИПТ
>)
>) (JQuery);
Щодо другого, гублюся в здогадах.
Можливо і так, я ж говорю не шарю. Але от припустимо плагін jQuery Easy який по ідеї повинен був вирішити цю проблему, її не вирішував і допомогло лише зміна коду описане вище. Головне працює :)