Кнопка «Наверх»

Как следует из названия, такая кнопка служит для того, чтобы быстро возвращаться наверх страницы.

Приготовления

Создаем в шаблоне сниппет с названием, например “to_top”.

Подключаем CoffeScript, создаем теги ссылки, стиля и скрипта:

<a href="#" class="to_top"></a>
<style>
</style>
<script type="text/javascript" src="https://cdn.rawgit.com/jashkenas/coffeescript/master/extras/coffee-script.js"></script>
<script type="text/coffeescript">
</script>
<a href="#" class="to_top"></a>
https://cdn.rawgit.com/jashkenas/coffeescript/mast...</a>">

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

Подключим сниппет в шаблоне “layout” перед закрывающим тегом body.

{% include 'to_top' %}

Стили

Устанавливаем фиксированную позицию для ссылки, положение в 50 пикселей от нижнего и правого края документа, ширину и высоту ссылки, затем скрываем ее. В качестве фонового изображения устанавливаем любое изображение стрелочки, которое нравится. Чтобы страница грузилась быстрее, экономим лишний http запрос и кодируем картинку в формат base64, с помощью любого онлайн конвертера.

.to_top {
    position: fixed;
    right: 50px;
    bottom: 50px;
    width: 51px;
    height:  51px;
    display: none;
    background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAclJREFUeNrsmbFqwkAYx5NTtBZsOxSXQsFqh0LH4lwcFByb1q1Tn6JP4tYXaNIH6OBjdAlS6OomYrUU9X/wBUKIqcTc1QvfBz8Id5fzfuffkETbdV0LdQQ64JyOTakJ+ALvjuNMijg4BU+gYplXcuOvQcPzvBeBg7ahIuGS629LmQsrH9WQMgc5kSkJK0fFMizDMizDMiyjsooaPmMOXun4QeUdh+pv5ht4YER41GaczAK8AT/U5lPbwiQZGS03IhIWcmnM3ssE0fITxvgqIic0RCtJKNPICU3RShLKLHJCY7SUR05ojpbSyIl/iJayyO0iM9shWn9FbqZbZpto2Vu2xUVOq8xxQp98j3W74d6vSH2VlHMrkemBVkz7IeiDK7CM6V9SX5/GRqtFc2uVKYBuRKgM7kAd/IJVzHkr6qvT2HJEpEtza7+aFWgXb0AV3INmaNGbKuhr0jlVmqOXViTL55kO7WotxbmX4BGc7MvDWSmlSFC1LBbB7wBYhmX2S2a1ZVsmpfJVk01XuWXMBtqmyZyBZ/7NsAzLsAzLsEyeZOY5cfmRMp85kRlJmaGl8N8sTSXXP5QyYzAAH2BqmMSU1j1wHGe8FmAAYP5lQb2qms4AAAAASUVORK5CYII=');
    }

Логика

Изначально стрелка скрыта, если страница находится в верхнем положении, однако должна появляться если страница загружается на середине, или отматывается скроллом. При пролистывании страницы в исходное положение, должна снова изчезать. Так же, кнопка должна срабатывать при нажатии.

Добавляем скрипт.

$ ->
  to_top = $('.to_top')
  to_top_engine = ->
    unless $(@).scrollTop() is 0
      to_top.fadeIn()
    else
      to_top.fadeOut()  
  to_top_engine()
  $(window).scroll ->
    to_top_engine()
  to_top.on 'click', (e) ->
    e.preventDefault();
    $('body').animate {scrollTop:0}, 800

Для соблюдения принципа DRY (Do not repeat yourself), создана функция to_top_engine, которая вызывается при загрузке страницы и каждый раз при срабатывании события scroll. При клике на кнопку срабатывает анимация.

Результат

На этом этапе сниппет должен выглядеть так:

<a href="#" class="to_top"></a>
<style>
.to_top {
    position: fixed;
    right: 50px;
      bottom: 50px;
    width: 51px;
    height:  51px;
      display: none;
    background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAclJREFUeNrsmbFqwkAYx5NTtBZsOxSXQsFqh0LH4lwcFByb1q1Tn6JP4tYXaNIH6OBjdAlS6OomYrUU9X/wBUKIqcTc1QvfBz8Id5fzfuffkETbdV0LdQQ64JyOTakJ+ALvjuNMijg4BU+gYplXcuOvQcPzvBeBg7ahIuGS629LmQsrH9WQMgc5kSkJK0fFMizDMizDMiyjsooaPmMOXun4QeUdh+pv5ht4YER41GaczAK8AT/U5lPbwiQZGS03IhIWcmnM3ssE0fITxvgqIic0RCtJKNPICU3RShLKLHJCY7SUR05ojpbSyIl/iJayyO0iM9shWn9FbqZbZpto2Vu2xUVOq8xxQp98j3W74d6vSH2VlHMrkemBVkz7IeiDK7CM6V9SX5/GRqtFc2uVKYBuRKgM7kAd/IJVzHkr6qvT2HJEpEtza7+aFWgXb0AV3INmaNGbKuhr0jlVmqOXViTL55kO7WotxbmX4BGc7MvDWSmlSFC1LBbB7wBYhmX2S2a1ZVsmpfJVk01XuWXMBtqmyZyBZ/7NsAzLsAzLsEyeZOY5cfmRMp85kRlJmaGl8N8sTSXXP5QyYzAAH2BqmMSU1j1wHGe8FmAAYP5lQb2qms4AAAAASUVORK5CYII=');
    }
</style>
<script type="text/javascript" src="https://cdn.rawgit.com/jashkenas/coffeescript/master/extras/coffee-script.js"></script>
<script type="text/coffeescript">
$ ->
  to_top = $('.to_top')
  to_top_engine = ->
    unless $(@).scrollTop() is 0
      to_top.fadeIn()
    else
      to_top.fadeOut()  
  to_top_engine()
  $(window).scroll ->
    to_top_engine()
  to_top.on 'click', (e) ->
    e.preventDefault();
    $('body').animate {scrollTop:0}, 800     
</script>

Кнопка на сайте:

Итог

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

<a href="#" class="to_top"></a>
<style>
.to_top {
    position: fixed;
    right: 50px;
      bottom: 50px;
    width: 51px;
    height:  51px;
      display: none;
    background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAclJREFUeNrsmbFqwkAYx5NTtBZsOxSXQsFqh0LH4lwcFByb1q1Tn6JP4tYXaNIH6OBjdAlS6OomYrUU9X/wBUKIqcTc1QvfBz8Id5fzfuffkETbdV0LdQQ64JyOTakJ+ALvjuNMijg4BU+gYplXcuOvQcPzvBeBg7ahIuGS629LmQsrH9WQMgc5kSkJK0fFMizDMizDMiyjsooaPmMOXun4QeUdh+pv5ht4YER41GaczAK8AT/U5lPbwiQZGS03IhIWcmnM3ssE0fITxvgqIic0RCtJKNPICU3RShLKLHJCY7SUR05ojpbSyIl/iJayyO0iM9shWn9FbqZbZpto2Vu2xUVOq8xxQp98j3W74d6vSH2VlHMrkemBVkz7IeiDK7CM6V9SX5/GRqtFc2uVKYBuRKgM7kAd/IJVzHkr6qvT2HJEpEtza7+aFWgXb0AV3INmaNGbKuhr0jlVmqOXViTL55kO7WotxbmX4BGc7MvDWSmlSFC1LBbB7wBYhmX2S2a1ZVsmpfJVk01XuWXMBtqmyZyBZ/7NsAzLsAzLsEyeZOY5cfmRMp85kRlJmaGl8N8sTSXXP5QyYzAAH2BqmMSU1j1wHGe8FmAAYP5lQb2qms4AAAAASUVORK5CYII=');
    }
</style>
<script >
(function() {
  $(function() {
    var to_top, to_top_engine;
    to_top = $('.to_top');
    to_top_engine = function() {
      if ($(this).scrollTop() !== 0) {
        return to_top.fadeIn();
      } else {
        return to_top.fadeOut();
      }
    };
    to_top_engine();
    $(window).scroll(function() {
      return to_top_engine();
    });
    return to_top.on('click', function(e) {
      e.preventDefault();
      return $('body').animate({
        scrollTop: 0
      }, 800);
    });
  });
}).call(this);