Как сделать кнопку «Наверх» как ВКонтакте

Віталий

10 років ago

Доброго времени суток. 🙂

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

На моем сайте уже имеется урок посвященный тому как сделать кнопку возвращения вверх, можете посмотреть эту статью -

В этой же статье, хочу немного модернизировать тот урок и выполнить новую кнопку в том виде, в каком она сделана на сайте ВКонтакте.

Для тех, кого заинтересовал данный вид и выполнение кнопки возвращения, предлагаю приступить к воплощению задуманного.

В самом начале Вам нужно определится с библиотекой jquery. Вам нужно ее подключить, если Вы этого не делали раньше.

Чаще всего библиотеку подключают в шапке или подвале сайта. Если Вы определились где лучше это сделать, вставьте следующий код

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

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

<script type="text/javascript">
function up() {  
  var top = Math.max(document.body.scrollTop,document.documentElement.scrollTop);  
if(top > 0) {  
  window.scrollBy(0,((top+100)/-10));  
  t = setTimeout('up()',20);  
} else clearTimeout(t);  
return false;  
}
jQuery(function(f){
    var element = f('#back-top');
    f(window).scroll(function(){
        element['fade'+ (f(this).scrollTop() > 200 ? 'In': 'Out')](250);           
    });
});
</script>

Данный скрипт имеет несколько параметров, которые Вы можете регулировать и настраивать под себя.

+100 — это высота в пикселях, при которой движение начнет замедлятся, когда Вы поднимаетесь.
-10 — высота в пикселях, которые прокручивает скрипт для подъема вверх.
20 — значение в миллисекундах, равно 0,02 секунды, за которые прокручиваются 10 пикселей что указаны выше.
> 200 — высота от верха страницы, на которой кнопка исчезает или появляется в зависимости от направления движения.
250 — время в миллисекундах равно 0,25 сек. Время анимации появления и исчезновения.

Далее нужно добавить саму кнопку в шапку или подвал, которая будет появляться слева. Кнопке присвоим id - back-top. Сама кнопка - это обычная ссылка, так что в нее пропишем анкор - слово "Наверх" и треугольник, который будет указателем. Треугольник будет юникодом.

<a id="back-top" href="#" onclick="return up()">&#9650; Наверх</a>

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

#back-top {
    width:100px;
    height:100%;
    position:fixed;
    top:0;
	left:0;
    display:none;
    text-align:center;
    font:bold 12px Verdana, sans-serif;
    text-decoration:none;
    color:#45688E;
    padding-top:10px;
	}
#back-top:hover {
    background: rgba(225,231,237, 0.8);
}

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

А с какой стороны Вам удобнее размещение кнопки и лучше сверху или снизу?

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

Exit mobile version