Как следует из названия, такая кнопка служит для того, чтобы быстро возвращаться наверх страницы.
Приготовления
Создаем в шаблоне сниппет с названием, например “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>
Кнопка на сайте:
Итог
Теперь все работает, осталось скомпилировать скрипт. Стоит отметить, что так-как скрипт находится в конце страницы и не выполняется при загрузке, делать это не обязательно, однако ради одной функции не стоит загружать целую библиотеку, к тому же наличие исходного кода для этого скрипта не имеет смысла, потому, что впоследствии он вряд ли будет редактироваться. Вот как должен выглядеть полностью готовый сниппет: