• Главная
    • /
  • Блог
    • /
  • Креативная кнопка «вверх» с плавной прокруткой страницы

Главная › Новости

Креативная кнопка «вверх» с плавной прокруткой страницы


Опубликовано: 01.09.2018

Практически на любом сайте можно встретить скользящею кнопку, так называемой «Вверх», которая за считанные секунды поднимает с конца страницы на ее начала. Это очень удобно особенно, когда страница не имеет дна, то есть очень большая настолько, что устаешь крутить колесико на мышки. Я уже писал об одном варианте, как сделать кнопку «вверх» и делал обзор плагинов для WordPress на эту же тему. Но сегодня рассмотрим креативный вариант так же, как и предыдущее с плавной прокруткой и со своей изюминкой.

Весь код состоит из двух частей: непосредственно сам скрипт и стили оформления внешнего вида. Проще, думаю, создать отдельный файл со скриптом, а затем подключить его на сайт чем пряма вставлять весь код в шаблонный файл сайта. Откройте любой редактор, добавьте ниже представленный код и сохраните под название, например, gogotop.js .

var bigfa_scroll = { drawCircle: function(id, percentage, color) { var width = jQuery(id).width(); var height = jQuery(id).height(); var radius = parseInt(width / 2.20); var position = width; var positionBy2 = position / 2; var bg = jQuery(id)[0]; id = id.split("#"); var ctx = bg.getContext("2d"); var imd = null; var circ = Math.PI * 2; var quart = Math.PI / 2; ctx.clearRect(0, 0, width, height); ctx.beginPath(); ctx.strokeStyle = color; ctx.lineCap = "square"; ctx.closePath(); ctx.fill(); ctx.lineWidth = 3; imd = ctx.getImageData(0, 0, position, position); var draw = function(current, ctxPass) { ctxPass.putImageData(imd, 0, 0); ctxPass.beginPath(); ctxPass.arc(positionBy2, positionBy2, radius, -(quart), ((circ) * current) - quart, false); ctxPass.stroke(); } draw(percentage / 100, ctx); }, backToTop: function($this) { $this.click(function() { jQuery("body,html").animate({ scrollTop: 0 }, 800); return false; }); }, scrollHook: function($this, color) { color = color ? color: "#000000"; $this.scroll(function() { var docHeight = (jQuery(document).height() - jQuery(window).height()), $windowObj = $this, $per = jQuery(".per"), percentage = 0; defaultScroll = $windowObj.scrollTop(); percentage = parseInt((defaultScroll / docHeight) * 100); var backToTop = jQuery("#backtoTop"); if (backToTop.length > 0) { if ($windowObj.scrollTop() > 100) { backToTop.addClass("button--show"); } else { backToTop.removeClass("button--show"); } $per.attr("data-percent", percentage); bigfa_scroll.drawCircle("#backtoTopCanvas", percentage, color); } }); } } jQuery(document).ready(function() { jQuery("body").append('<div id="backtoTop" data-action="gototop"><canvas id="backtoTopCanvas" width="48" height="48"></canvas><div class="per"></div></div>'); var T = bigfa_scroll; T.backToTop(jQuery("#backtoTop")); T.scrollHook(jQuery(window), "#13B9CA");//цвет полосы загрузки });

Загрузите этот скрипт себе на сайт в любое удобное вам место. После чего подключите в самом низу сайта перед закрывающим тегом </body> (WordPress файл footer.php ). На WordPress’e можно выполнить подключение таким образом:

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/gogotop.js"></script>

Или укажите прямой путь к скрипту если другая платформа. И если у вас не подключена библиотека jQuery, то также подключаем и ее.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

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

Вторая часть, как говорилось выше, состоит из стилей, которые нужно добавить в ваш основной файл.

#backtoTop { background-color:#fafafa; border-radius:100%; bottom:18%; height:48px; position:fixed; right:-100px; width:48px; transition:0.5s; -webkit-transition:0.5s; box-shadow: 0 1px 1px 1px rgba(0,0,0,0.1); } #backtoTop.button--show{ right:50px } .per{ font-size:16px; height:48px; line-height:49px; position:absolute; text-align:center; top:0; width:48px; color:#13B9CA; cursor:pointer } .per:before{ content:attr(data-percent); } .per:hover:before{ content:"▲"; font-size: 22px; line-height: 0; }

В итоги получаем такой результат:

Посмотреть Demo

На этом все.

Источник: https://fatesinger.com/74271

rss