А именно: описание того как можно сделать кнопку "Вверх" и реализовать простую прокрутку веб-страницы только через HTML и CSS, а также лучшие решения как сделать плавный скроллинг страницы используя jQuery. И конечно, инструкция как это применить.
Итак, начнем с простого.
Кнопка и прокрутка страницы вверх через HTML и CSS.
Тут все очень просто - реализуется такая кнопка по средствам, так называемого "якоря". Действия следующие:Вверху страницы, в коде сразу после <body> или в блоке с меню, в общем в том месте до которого нужно прокрутить страницу, устанавливаем следующую конструкцию:
<div><a id='top'/></div>
Где id - идентификатор ссылки.Теперь нужно разместить саму ссылку-кнопку при нажатии на которую будет происходить прокрутка страницы к якорю. Её конструкцию можно расположить в любом удобном месте, т.к. положение кнопки определяется через CSS. Код такой:
<div><a href="#top" class="idTop">ВВЕРХ</a></div>
А чтобы придать это конструкции вид кнопки добавим CSS, он будет примерно такой:a.idTop {
position: fixed; /*позиционирование кнопки фиксированное*/
z-index: 9999; /*отображаем поверх всех элементов*/
bottom: 0%; /*положение снизу*/
right: 0%; /*положение справа*/
background: #7db9e8; /*фон, можно указать любую картинку*/
opacity: .6; /*прозрачность*/
color: #fff; /*цвет текста*/
padding: 10px; /*внутренние отступы*/
margin: 5px 15px 15px 5px; /*внешние отступы*/
}
a.idTop:hover {
opacity: 1;
}
Или можно использовать готовое изображение кнопки в виде стрелки вверх или еще чего, это уже кому как. Тогда код для кнопки будет таким:position: fixed; /*позиционирование кнопки фиксированное*/
z-index: 9999; /*отображаем поверх всех элементов*/
bottom: 0%; /*положение снизу*/
right: 0%; /*положение справа*/
background: #7db9e8; /*фон, можно указать любую картинку*/
opacity: .6; /*прозрачность*/
color: #fff; /*цвет текста*/
padding: 10px; /*внутренние отступы*/
margin: 5px 15px 15px 5px; /*внешние отступы*/
}
a.idTop:hover {
opacity: 1;
}
<div><a href="#top" class="idTop"><img src='.../myimage.png'/>
</a></div>
Минус такого подхода к реализации кнопки "Вверх" в том, что она будет видна, и вверху страницы тоже. Ну а плюсы что на неё не влияет включена ли поддержка JavaScript в браузере пользователя, для реализации такой кнопочки не нужно устанавливать ни плагинов, ни скриптов на сайт, которые поедают время и скорость его загрузки.</a></div>
Скрипт jQuery для плавной прокрутки страницы вверх
Данный вариант не сильно отличается от предыдущего примера на HTML, но он призван упростить две вещи в реализации быстрого скроллинга - избавить от размещения якоря и сделать прокрутку страницы более плавной. Путь внедрения такой:- Подключаем любую версию jQuery, лучше конечно последнюю.
- Затем добавляем на сайт скрипт представленный ниже:
$(function() {
$('.backtotop').click(function(){
$('html, body').animate({scrollTop:0}, 'slow');
});
});
- Размещаем в шаблоне блок с селектором .backtotop - блок, ссылку, кнопку. $('.backtotop').click(function(){
$('html, body').animate({scrollTop:0}, 'slow');
});
});
- Задаем для него желаемый вид через CSS. Можно из предыдущего примера, только здесь, для примера, сделаем вариант с изображением:
a.idTop {
position: fixed;
z-index: 9999;
bottom: 0%;
right: 0%;
background: url('.../yuor_image_64x64.jpg') no-repeat;
height: 64px;
width: 64px;
opacity: .6;
color: transparent;
padding: 10px;
margin: 5px 15px 15px 5px;
}
a.idTop:hover {
opacity: 1;
}
Плюсы - легкость скрипта, красота работы, минусы - маленький функционал, а практически его и нет-то. Ведь не всегда требуется прокрутить страницу сайта только вверх, иногда хочется предоставить пользователю возможность вернуться к месту клика по кнопке или к самому низу страницы.position: fixed;
z-index: 9999;
bottom: 0%;
right: 0%;
background: url('.../yuor_image_64x64.jpg') no-repeat;
height: 64px;
width: 64px;
opacity: .6;
color: transparent;
padding: 10px;
margin: 5px 15px 15px 5px;
}
a.idTop:hover {
opacity: 1;
}
Но самым жизнеспособным и несомненно лучшим выполнением данной задачи, стал jQuery плагин (очень небольшой скрипт), предложенный by Craig Wilson, Ph.Creative еще в далеком 2009 году, который во всю используется и рекламируется по сей день. Представляю его вашему вниманию.
jQuery плагин прокрутки веб-страницы вверх
Вообще, по большому счету, прям-таки плагином этот скрип назвать как-то не особо и получается из-за его совершенно небольшого размера. Но при этом, он обладает всеми необходимым функционалом. Этот скрипт:- плавно прокручивает страницу вверх;
- кнопка прокрутки не видна вверху страницы, а появляется когда часть уже прокручена и исчезает после возврата к верху;
- имеет маленький размер и работает во всех браузерах.
Итак, HTML код для кнопки:
<a href="#" id="toTop"></a>
Размещаем в любом подходящем месте шаблона, в Blogger это можно сделать в гаджете HTML/JavaScript.Далее добавляем CSS
Кнопка с текстом:
#toTop {
position:fixed;
z-index:9999;
bottom:10px;
right:10px;
background: #F4FFBF;
border: 1px solid #ccc;
padding: 5px;
cursor: pointer;
color: #666;
text-decoration: none;
width:100px;
}
Кнопка - изображение:position:fixed;
z-index:9999;
bottom:10px;
right:10px;
background: #F4FFBF;
border: 1px solid #ccc;
padding: 5px;
cursor: pointer;
color: #666;
text-decoration: none;
width:100px;
}
#toTop {
position:fixed;
z-index:9999;
bottom:10px;
right:10px;
background: url('.../yuor_image_64x64.png') no-repeat;
width: 64px;
height: 64px;
border: none;
padding: 5px;
cursor: pointer;
color: transparent;
text-decoration: none;
}
И собственно, размещаем сам jQuery плагин, как обычно, до закрывающего </head>position:fixed;
z-index:9999;
bottom:10px;
right:10px;
background: url('.../yuor_image_64x64.png') no-repeat;
width: 64px;
height: 64px;
border: none;
padding: 5px;
cursor: pointer;
color: transparent;
text-decoration: none;
}
$(function(){
$.fn.scrollToTop=function(){
$(this).hide().removeAttr("href");
if($(window).scrollTop()!="0"){
$(this).fadeIn("slow")
}
var scrollDiv=$(this);
$(window).scroll(function(){
if($(window).scrollTop()=="0"){
$(scrollDiv).fadeOut("slow")
}else{
$(scrollDiv).fadeIn("slow")
}
});
$(this).click(function(){
$("html, body").animate({scrollTop:0},"slow")
})
}
});
$(function() {$("#toTop").scrollToTop();});
$.fn.scrollToTop=function(){
$(this).hide().removeAttr("href");
if($(window).scrollTop()!="0"){
$(this).fadeIn("slow")
}
var scrollDiv=$(this);
$(window).scroll(function(){
if($(window).scrollTop()=="0"){
$(scrollDiv).fadeOut("slow")
}else{
$(scrollDiv).fadeIn("slow")
}
});
$(this).click(function(){
$("html, body").animate({scrollTop:0},"slow")
})
}
});
$(function() {$("#toTop").scrollToTop();});
Вот такие три простых решения для того чтобы сделать красивую и удобную кнопку прокрутки страницы.
©http://magentawave.com
Спасибо большое за полезный материал! Давно хотела установить нечто подобное в свой Blogger.
ОтветитьУдалитьКонечно же у каждого свой вкус. А я противник установки лишних скриптов на странице блога.
ОтветитьУдалитьЯ устанавливал подобную кнопку на свой блог, а через неделю от нее отказался.
Зачем она нужна? Ведь на клавиатуре есть кнопки "Home" - вверх страницы, "End" - вниз, "Page Up" и "Page Down" - прокрутка экрана вверх или вниз. А кнопка, установленная на странице, лишь увеличивает время ее загрузки.
Это мое личное мнение, хотя, в этом вопросе я не одинок.
Удачи!
Ваше мнение конечно интересно, за мануал по клавиатуре отдельное спасибо :), но позволю с ним не согласится.
УдалитьВопрос не в том чтобы просто прокрутить страницу и сделать это быстро, но еще и красиво. Смысл в кнопках клавы, если есть мышь и колесико? Да и не думаю что все помнят об этих кнопках, а многие даже не знают зачем они нужны, а так - увидели, кликнули и поехали.
Что касается загрузки и скриптов, то хочу заметить, что есть вариант на HTML, который по своей сути просто визуализирует кнопку клавиатуры "Home".
Ну а последний плагин весить в сжатом виде (без переносов и лишних пробелов) всего имеет размер 420 байт > 1Кбайта и на сколько же может такой скрипт замедлить загрузку вашего блога? А если еще и не использовать изображений для оформления, сделать все только через CSS (как это сделано здесь), то любая картинка весом в 2Кбт на больше замедлит скорость загрузки блога.
Но в любом случаи спасибо за ваше мнение и полезное информационное дополнение.
Я тоже не пользуюсь данной кнопкой, но считаю, что на страничках с большим объёмам информации (салфетках с множеством комментариев) она не будет лишней и даже наоборот - будет весьма востребована посетителями.
УдалитьPS. Вполне можно поставить на какой-нибудь проект.
Думаю,что те,ком нужна такая кнопка,с удовольствием воспользуются информацией ,изложенной здесь.
ОтветитьУдалитьК сожалению,я ещё до этого не доросла.Но,с удовольствием прочла и теперь знаю,куда мне заглянуть в случае чего...:)
А у меня что-то не работает 3-й вариант нормально, ничего не исчезает и не появляется - висит постоянно и баста ))
ОтветитьУдалитьК сайту должна быть подключена библиотека jQuery для работы jQuery-плагина :)
УдалитьА где взять эту библиотеку?
УдалитьПоделитесь...
Ознакомьтесь с этой статьей http://www.magentawave.com/2013/03/jquery.html
УдалитьЭто "чистый" JavaScript, в котором я пока не силен :( Я даже не знаю возможно ли на нем такое сделать вообще, обратись к автору,
ОтветитьУдалитьа какой скрипт Вы использовали для реализации кнопок вверх-вниз на своём сайте?
ОтветитьУдалитьАналог описан здесь - http://www.magentawave.com/2013/01/scroll-page-up-and-down.html
УдалитьЗдравствуйте, я правильно поняла, что надо скопировать подряд три кода: код кнопки, потом CSS, потом плагин, и всё это дело вставляем подряд над (тэг в комментарий не вставился)? И как подключить библиотеку jQuery для работы jQuery-плагина?
ОтветитьУдалитьКак подключить jQuery читаем здесь - http://www.magentawave.com/2013/03/jquery.html
УдалитьКоды вы копируете в те места шаблона где им место: CSS - к стилям, HTML - в код где думаете расположить кнопку и скрипт до закрывающего тега <head>. Но если речь о Blogger, то можно все разместить в гаджете HTML/JavaScript
Спасибо!
Удалитькнопка наверх очень нужна, особенно на мобильных устройствах. Жаль третий вариант не отображается на смртфоне нокия
ОтветитьУдалитьКтобы что не говорил, а кнопки эти нужны - особенно если сайт "заточен" под мобильные устройства - там уже нет клавы/мыши... ;)
ОтветитьУдалитьКак сделать что бы сайт прокручивался от определенной высоты? Например сортировка по буквам. Нажимаешь на букву "Е" сайт прокручивается вниз до буквы Е.
ОтветитьУдалитьИспользуйте самый простой способ - якоря. Если нужны дополнительные функции, типа плавной прокрутки или подсветки , то это нужно писать новый скрипт под ваши нужды.
УдалитьIakoriami polzuius davno.
ОтветитьУдалитьUdobno i praktichno dlia navigacii.
Dlia interesa postavil " variant 3"
Klassno,
No iakoria kak-to blije k telu i poproshe.
Огромное спасибо. Очень познавательная статья!!!
ОтветитьУдалитьОтличная статья спасибо
ОтветитьУдалитьспасибо, помогло
ОтветитьУдалитьБольшое спасибо!!!
ОтветитьУдалитьочень помогло
и мало что понятно почему просто не отдать готовый скрипт?
ОтветитьУдалитьВ статье их три, готовых, а вот тут есть еще варианты кнопок прокрутки:
Удалитьhttp://www.magentawave.com/2013/01/scroll-page-up-and-down.html
http://www.magentawave.com/2015/11/scroll-page-up-and-return.html
Хорошо бы, чтобы автор ещё давал посмотреть демо, а то нужно сначала установить, чтобы увидеть.
ОтветитьУдалитьЕщё вопрос: можно ли сделать плавную прокрутку только на CSS3 без яваскрипт? Спасибо.
Здесь с демо как-то не срослось, но хорошие примеры есть еще тут
Удалитьhttp://www.magentawave.com/2015/11/scroll-page-up-and-return.html
http://www.magentawave.com/2013/01/scroll-page-up-and-down.html
На CSS можно, в ближайшее время добавлю пример в этот пост
Дурная идея,оказалась заразительной.При скролинге иногда средняя кнопка случайно нажимается
ОтветитьУдалитьи выскакивает то чем вы гордитесь,а у меня экран подвисает,скорость сбрасывается ,направление
иногда то-же меняется.При нажатии на стрелку ты не перемещаешся в конец или в начало страницы.
Кнопка исчезает ,не даёт нажать на стрелку повторно.Такое гавно,нашли чем хвастаться.