Кнопки и плавная прокрутка вверх и вниз страницы.

Две мартышки сидят в обнимкуИногда, на сайте или в блоге, возникает потребность добавить и использовать не только кнопку прокрутки вверх, но и вниз страницы.
  В этой заметке показан простой и весьма элегантный пример реализации кнопок "Вверх" и "Вниз" без использования картинок, и вариант небольшого скрипта jQuery для плавной прокрутки страницы в указанном направлении.
 Способ хорош тем, что изначально, когда страница поднята вверх, кнопка "Вверх" скрыта, когда прокручена до низа - скрыта кнопка "Вниз", параметры высоты, на которой появляются кнопки регулируется.

DEMO
 Итак, HTML код кнопок выглядит так:
<div class="go-up" title="Вверх" id='ToTop'></div>
<div class="go-down" title="Вниз" id='OnBottom'></div>
 Для реализации указателей направления прокрутки - стрелок, применяются спецсимволы юникода, которые просто копируются и вставляются внутри тега. Такой подход позволяет обойтись без использования изображений, добавляя плюс к оптимизации, а также позволяя легко настроить и, по необходимости, быстро изменить внешний вид кнопок.
При использовании стандартных спецсимволов в дизайне элементов сайта нужно сделать две проверки:
1) проверить кодировку веб-страницы - должна быть UTF-8;
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
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 { bottom: 60px; }
.go-down { bottom: 10px; }
.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")
 });

 $("#ToTop").click(function(){$("html,body").animate({scrollTop:0},"slow")})
 $("#OnBottom").click(function(){$("html,body").animate({scrollTop:$(document).height()},"slow")})
});
Значение 250 в скрипте, показывает:
 - в первой строке - кнопка появится когда страница будет прокручена больше чем на 250 пикселей;
 - во второй, что исчезнет когда до верха страницы останется меньше чем 250 пикселей.
 Не забываем, что для работы скрипта требуется подключить к сайту фреймворк jQuery.

 На этом пока что все, всем спасибо за внимание.

©http://magentawave.com

52 комментария:

  1. скрипт jQuery Не могу разместить перед код

    ОтветитьУдалить
    Ответы
    1. В Blogger, так он написан на XML скрипты с условиями ЕСЛИ - if и вариантами И - &&, ИЛИ - ||, БОЛЬШЕ - > и т.д. надо заключать в тег-комментарий CDATA:

      <script type='text/javascript'>
      //<![CDATA[

      *ТУТ СКРИПТ*

      //]]>
      </script>

      Можете сразу все скрипты в эту обертку и кидать, а не оборачивать каждый отдельно.

      Удалить
  2. Благодарю! Всё получилось. Эффект от CSS в данном случае неописуем! :) Если честно, установив первые 2 строки и сам скрипт, я уже собралась возвращать всё обратно (так было ужасно не красиво, да ещё и не с той стороны). Но после вставки стилей проблема, естественно отпала! Так классно! ;)

    ОтветитьУдалить
    Ответы
    1. Так на то он, CSS, и нужен, что все оформить как надо :)

      Удалить
  3. Одно маленькое, но важное уточнение...
    Оказывается не в каждом шаблоне по умолчанию подключен jquery.
    В моем ("Корпорация Чудеса" или Awesome inc.) его не было, и скрипт естественно не исполнялся. Поэтому:
    если вдруг скрипт не работает, кнопочки не появляются и настроение ухудшается, в-первую очередь проверяем, и если не находим - добавляем в шаблон до тега </head> вызов jquery.
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
    а в целом - КЛАССНЫЕ СТРЕЛОЧКИ!!! Спасибо за подробный мануал.

    ОтветитьУдалить
    Ответы
    1. В стандартном шаблоне он, жиквери, ни у кого не подключен, его надо подключать самостоятельно. Я этот момент опустил, т.к. думаю это само-собой понятно, но теперь думаю стоит обновить статью и добавить этот пункт. Спасибо за корректировку.

      Удалить
  4. Не знаю как присутствующие, а у меня в школе информатика была та еще: мы изучали Бэйсик, линии чертили благодаря формулам, а мышек в глаза не видели)) Поэтому компьютерной грамотности учусь сама, в том числе и тому, что касается блога. Так вот, стрелочки это удобно бесспорно. Но ведь реально они не нужны, когда знаешь малюсенькую хитрость (обнаружена случайно, работает везде)

    Если нажать на КОЛЕСИКО у мышки в любом месте текста (кроме изображения и ссылки), то появится "нечто" в кружочке и при движении мышкой вверх или вниз, а иногда и в стороны страница перематывается. В зависимости от того, как далеко от центра отведете курсор, скорость увеличивается или уменьшается. Несомненный плюс этого нехитрого метода в том, что остановить можно в любом месте и в любой момент. А стрелочки только до самого верха или до самого низа.

    Если же навести курсор на ссылку или изображение, которое является ссылкой, и нажать на КОЛЕСИКО мышки,то ссылка откроется в новой вкладке.

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

    ОтветитьУдалить
    Ответы
    1. Я думаю что каждый кто пользуется компьютерной мышкой об этом знает :) Тут вопрос на сколько кому и что удобно, я например вообще этой функцией не пользуюсь и когда она случайно включается очень нервничаю, потому что не всегда она к месту и удобна. И к вашему комментарию можно добавить что и клавиатуре есть соответствующие кнопки PageUp PageDown End и Home, но кто ими пользуется?

      Но вы конечно молодец что делитесь такой важной и полезной информацией, за что вам огромное спасибо.

      Удалить
    2. Да, про кнопки знаю, но в темноте ночи их искать не очень удобно, да и мышка уже в руке. Я прошу прощения за свои глупые комментарии, уже пожалела, что написала их Мои статьи это детский лепет по сравнению с вашими, но мои читатели это простые люди и им как раз нужна информация изложенная максимально просто. А про стрелочки у меня заказывали информацию, но я просто вышлю ссылку на вашу статью. Та девушка продвинутая, разберется.

      Удалить
    3. Ну что вы! Не стоит извиняться, все вы верно заметили, а из личного опыта я могу сказать одно, что "простым" людям не нужна информация им нужен готовый результат: скопировал - вставил - радуешься. Но у этого способа есть очень много недостатков, по-этому я просто перестал писать такие посты и дублировать однообразный контент, которого в сети уже "over 99999999999" ответов, как бы популярно это не было.

      Удалить
  5. Анонимный10.05.2013, 21:13

    Куда вставлять эти коды то, АА???? Подскажите будьте так любезны

    ОтветитьУдалить
  6. Анонимный25.05.2013, 16:20

    Спасибо. Все получилось. Только я скрипт от jQuery поместил в отдельный файл и к нему путь указал. Сделал так, для того чтобы соблюдалась валидность кода на странице.

    ОтветитьУдалить
  7. Анонимный27.06.2013, 10:34

    Спасибо

    ОтветитьУдалить
  8. у меня был другой вариант , Ваш лучше!
    СПАСИБО!

    ОтветитьУдалить
  9. Анонимный21.08.2013, 11:04

    У меня ругается на знак "<" что делать?

    ОтветитьУдалить
    Ответы
    1. Запишите его таким же образом , как записали сюда (в комментарий) или используйте UTF символы

      Удалить
  10. А на wordpress эти кнопки установятся?

    ОтветитьУдалить
    Ответы
    1. Конечно, как и на любой другой движок, для этого нет никаких препятствий :)

      Удалить
  11. подскажите пожалуйста пути к файлам, куда вставить эти коды IP. Board 3.4.5

    ОтветитьУдалить
    Ответы
    1. К сожаления не могу вам помочь, т.к. не знаком этой системой.

      Удалить
  12. Анонимный22.09.2013, 13:52

    Подскажите пожалуйста, как вместо стрелок вставить свои картинки? Если возможно - код полностью, а то я чайник в этом деле.

    ОтветитьУдалить
    Ответы
    1. Да, конечно. Вот готовый пример - http://jsfiddle.net/ZqexF/
      Скрипт тот же(из статьи), ссылки на картинки в коде CSS замените на те, которые желаете использовать вы.

      Удалить
  13. Спасибо!!! Прикрутил к своему сайту без проблем :)

    ОтветитьУдалить
  14. Анонимный23.10.2013, 22:17

    помогите разобраться как прикрутить этот скрипт в форуму ipb 3.4.5

    mail - kremak_ip@mail.ru

    ОтветитьУдалить
    Ответы
    1. Если у вас есть доступ к HTML коду, то воспользоваться этим скриптом не составит труда. Я же просто не знаю как там у вас все устроено, может кто еще подскажет.

      Удалить
  15. Анонимный01.11.2013, 14:55

    Спасибо. Все получилось. Красиво сделано.

    ОтветитьУдалить
  16. Анонимный12.11.2013, 14:46

    Как изменить скорость прокрутки?

    ОтветитьУдалить
    Ответы
    1. Вот в этом месте скрипта
      $("html,body").animate({scrollTop:0},"slow")}
      замените "slow" на значение в цифрах - время за которое будет прокручена страница.

      Удалить
    2. Анонимный23.12.2013, 00:55

      Какая скорость стоит у вас на этой странице?

      Удалить
    3. Здесь, такая же как и в статье, указано - "slow"

      Удалить
  17. Здравствуйте, вы можете выложить код кнопки "ответить" на это страницы и описать как ее сделали

    ОтветитьУдалить
    Ответы
    1. На данный момент такого желания у меня нет, но позже я возможно напишу что-то подобное.

      Удалить
  18. Подскажите, пожалуйста, можно ли увеличить расстояние между кнопками?

    ОтветитьУдалить
    Ответы
    1. Можно, для селектора .go-up увеличьте значение свойства bottom. Например:
      .go-up {
      bottom: 100px;
      }

      Удалить
  19. А как сделать так чтобы кнопка вверх была вверху справа а кнопка вниз - внизу справа независимо от разрешения
    можно изменить конечно расстояние между кнопками но если разное разрешение может по разному отображаться

    ОтветитьУдалить
    Ответы
    1. Вам нужно просто изменить положение элемента (кнопки). Например:
      Вместо
      .go-up { bottom: 60px; }
      Укажите
      .go-up { top: 10px; }

      Про это есть в этом блоге статья
      http://www.magentawave.com/2012/03/fixed-elements-in-blogger.html

      Удалить
  20. Анонимный08.02.2014, 23:44

    Спасибо пригодилась данная инфа...

    ОтветитьУдалить
  21. Большое спасибо, пригодилось. Самое интересное и простое (кода минимум) решение кнопок вверх вниз, которое нашел.

    ОтветитьУдалить
  22. Анонимный13.01.2015, 13:19

    Не вставляются спецсимволы юникода ⇧⇩. Просто превращаются в квадратики. Каким редактором вставлять?

    ОтветитьУдалить
  23. Анонимный27.02.2015, 03:56

    Здравствуйте.
    Можно ли конкретно в этом скрипте реализовать следующее: при нажатии кнопки вниз - возвращаешься на место, откуда нажал на кнопку вверх?

    ОтветитьУдалить
  24. Анонимный31.05.2015, 15:16

    Добрый День,
    Подскажите как сделать прокрутку с определнным шагом ? В даном случае стрелки просто переводят вниз или вверх

    ОтветитьУдалить
  25. Анонимный17.08.2015, 16:25

    Самое лучшее решение, которое я нашел на сегодняшний день, для своего форума. Спасибо!

    ОтветитьУдалить
  26. Анонимный10.09.2015, 12:45

    У меня этот скрипт конфликтует со скриптом увеличения фото. Вместе не работают. По отдельности - отлично.
    Заменил имя $ на jQuery. Работают оба, но скрипт прокрутки срабатывает только один раз. Потом кнопки исчезают. Что делать?

    ОтветитьУдалить
  27. Здравствуйте. И снова я вам пишу.
    Не совсем разобралась... Точнее... У меня получилось установить эти кнопки только как виджет.

    Это у меня в HTML виджете -> http://s1.radikale.ru/uploads/2015/11/13/cbe1f3ba836563d4f8721e25fd30ac7c-full.png
    Это в CSS -> http://s1.radikale.ru/uploads/2015/11/13/1224ef6dfcc1c8cd88506114d2f5bc1e-full.png

    Прошу прощения за беспокойство. Однако прошу понять. Я только учусь обращаться с "Блоггер". Давно как-то уже зарегистрировалась, но... Тогда мне это казалось сложным очень. Сейчас я хоть чего-то добилась -> http://akemi-womenssecrets.blogspot.ru/ .
    После того как в первый раз зарегистрировалась и махнула рукой... Пошла на wix. Стоит ли говорить что после того как я почитала о детальных настройках и возможностей Blogger, я сразу вернулась? =)
    Ну ладно, это было лирическое отступление. Прошу извинить.
    Жду вашего ответа. Спасибо заранее! =)

    P.S. Скриншот кнопочек -> http://radikale.ru/uploaded/2015/11/13/6cd8a5c549a689d616789ed624579b80-full.png.html

    ОтветитьУдалить
    Ответы
    1. Я что-то с трудом понял суть проблемы)) И вместо того чтобы слать картинки с кодом, лучше сделайте нормальный доступ к нему на вашем сайте по средствам браузера, а не выводите таблички с надписями "Копирование запрещено" с помощью JavaScript, по секрету вам скажу, что для того, кто захочет украсть ваш контент, это не преграда, достаточно просто отключить в браузере JS и все, а трудностей и ненужный код в шаблоне создает много.

      Удалить
  28. Анонимный02.11.2016, 10:36

    Здравствуйте!
    А можно ли модифицировать скрипт, чтобы было реализовано ПОСТРАНИЧНОЕ ЛИСТАНИЕ.
    Например как здесь http://sergeistrelec.ru/article/ (не реклама)

    ОтветитьУдалить
    Ответы
    1. Конечно можно, но то что там сделано, скорее не "постраничное листание", а прокрутка к заголовку, относительный пример показан здесь -
      http://www.magentawave.com/2016/10/subtitles-automatic-menu.html

      Удалить
  29. У кого подключена jQuery, а она подключена уже везде наверно. Блин как сформулировать вообщем при добавлении jQuery переставал работать lightbox без добавления jQuery не работал сам скролл я уже отказался от этого классного скролла я в скриптах не шарю. И начал тестировать другие варианты благо сайтов море и возмутило меня что вот какой-то убогий скролл работает, причем используя ту же jQuery и этот вот классный нет. Методом тыка и пляски с бубном заменил все доллары $ на слово jQuery и все заработало и lightbox и скролл добавлять библиотеку дополнительно не надо

    ОтветитьУдалить
  30. Блин я по ходу никогда не уйду отсюда, забыл в первом комментарии написать про async или defer что бы скролл загружался только после того как загрузится страница JCE переделывает код на < script src="/scroll.js" defer="defer" type="text/javascript">< /script > сам скролл работает, только я не могу понять работает или нет defer. Поэтому вопрос, код который я написал выше он, скажем так, полностью выполняется?

    ОтветитьУдалить
    Ответы
    1. В отношении первого вашего коммента, думаю следовало бы обратить взоры на jQuery.noConflict(); , т.к. причина может быть в том, что к сайту одновременно подключены разные JS библиотеки.
      //api.jquery.com/jquery.noconflict/
      //jquery.page2page.ru/index.php5/Предупреждение%20конфликтов

      еще советовал бы скрипты jQ размещать в конструкции типа:
      (function($) { /*первая строка*/
      $(function() {
      // ТУТ ОДИН БОЛЬШОЙ JQUERY СКРИПТ
      })
      })(jQuery);

      Относительно второго, теряюсь в догадках.

      Удалить
    2. Возможно и так, я же говорю не шарю. Но вот допустим плагин jQuery Easy который по идее должен был решить эту проблему, её не решал и помогло лишь изменение кода описанное выше. Главное работает :)

      Удалить

Следующее Предыдущее

BestProject