19
Ноя

Кнопка вверх для сайта, как сделать кнопку наверх на сайте. Код (скрипт) кнопки вверх на 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">.

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

Похожие записи:
Комментарии к записи "Кнопка вверх для сайта, как сделать кнопку наверх на сайте. Код (скрипт) кнопки вверх на Html, css и Jquery для блога WordPress"
  • myblogy.vv.si

    Да эт легко)

  • Роман

    Здравствуйте! У меня сайт на престашоп. Подскажите пожалуйста, в какие файлы копировать скрипты (как они точно называются). Как я вставляю, ничего не работает. Возможно просто не в те файлы вставляю.

    • myBlogy

      Здравствуйте! Я не знаком с CMS Prestashop, поэтому могу не правильно подсказать. Если же вы плохо знакомы с HTML и Javascript, то проще всего будет найти подходящий плагин и установить его.

      • Роман

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

Оставить комментарий

Я не спам! (обязательно)

Подписаться, не комментируя