Кнопка вверх для сайта, как сделать кнопку наверх на сайте. Код (скрипт) кнопки вверх на Html, css и Jquery для блога WordPress

Кнопка вверх для сайта, как сделать кнопку наверх на сайте. Код (скрипт) кнопки вверх на Html, css и Jquery для блога WordPress

В этом небольшом посте я хочу поделиться с вами своей «стрелочкой наверх» :)

Кнопка вверх для сайта, как сделать кнопку на наверх на сайте. Код (скрипт) кнопки вверх на Html, css и Jquery для блога WordPress

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

На самом деле все очень просто, и если вы хорошо разбирается в. Код Html и css стили кнопки наверх, которые я использую у себя на блоге.

<a id="go_top" style="position: fixed; bottom: 10px; right: 10px; cursor: pointer; display: none;"><img title="Наверх" src="ссылка на картинку" alt="Наверх" /></a>

Размер кнопки или стрелки (кому как нравится) равен размеру картинки, которую вы хотите использовать. У меня стрелка расположена в правом нижнем углу, вы же можете сами установить свои размеры и расположение, нужно лишь чуток поправить css. У кого сайт или блог на Wordress’e — можете вставить данный код в блок footer или header.

Теперь самое важное — код (скрипт) кнопки вверх на Jquery, которые вы должны вписать в ваш файл js:

$(document).ready(function(){
$.fn.goTop=function(){ //Создаем функцию goTop()
var upT=$(this);
$(window).scroll(function(){
if($(window).scrollTop()<="300")$(upT).fadeOut("slow")
else $(upT).fadeIn("slow")});
$(this).click(function(){$("html, body").animate({scrollTop:0},"slow")})};
$(function(){$("#go_top").goTop();}); //Объявляем функцию goTop()
})

Первоначально создаем функцию goTop(), которая при скроллинге сравнивает значение scrollTop (получает/устанавливает значение отступа прокрутки сверху). Если оно меньше или равно 300, то кнопка плавно исчезает, иначе — плавно появляется.

При клике на кнопку вверх — значение scrollTop плавно переходит к 0, или проще говоря, плавно переходим вверх страницы. Далее объявляем функцию goTop() к нашей кнопке (стрелки), т.е. к тегу <a id=»go_top»>.

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

Комментарии

Комментариев пока нет. Почему бы ’Вам не начать обсуждение?

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *