ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Кнопка вверх и вниз на прокрутке для сайта

Кнопка вверх и вниз на прокрутке для сайта

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

Приступаем к установке:

В низ сайта и в самом верху прописываем скрипт.

Код
<script type="text/javascript">
jQuery(function(){
$("#Go_Top").hide().removeAttr("href");
if ($(window).scrollTop()>="250") $("#Go_Top").fadeIn("slow")
$(window).scroll(function(){
if ($(window).scrollTop()<="250") $("#Go_Top").fadeOut("slow")
else $("#Go_Top").fadeIn("slow")
});

$("#Go_Bottom").hide().removeAttr("href");
if ($(window).scrollTop()<=$(document).height()-"999") $("#Go_Bottom").fadeIn("slow")
$(window).scroll(function(){
if ($(window).scrollTop()>=$(document).height()-"999") $("#Go_Bottom").fadeOut("slow")
else $("#Go_Bottom").fadeIn("slow")
});

$("#Go_Top").click(function(){
$("html, body").animate({scrollTop:0},"slow")
})
$("#Go_Bottom").click(function(){
$("html, body").animate({scrollTop:$(document).height()},"slow")
})
});
</script>

<a style='position: fixed; bottom: 100px; right: 50px; cursor:pointer; display:none;'
href='#' id='Go_Top'>
<img src="http://zornet.ru/Aben/Gsa/ttop1.png" title="Вверх">
</a>
<a style='position: fixed; bottom: 30px; right: 50px; cursor:pointer; display:none;'
href='#' id='Go_Bottom'>
<img src="http://zornet.ru/Aben/Gsa/ttop2.png" title="Вниз">
</a>
<a style='position: fixed; bottom: 100px; right: 50px; cursor:pointer; display:none;'
href='#' id='Go_Top'>
<img src="http://zornet.ru/Aben/Gsa/ttop1.png" title="Вверх">
</a>
<a style='position: fixed; bottom: 30px; right: 50px; cursor:pointer; display:none;'
href='#' id='Go_Bottom'>
<img src="http://zornet.ru/Aben/Gsa/ttop2.png" title="Вниз">
</a>


PS - здесь вы можете поставить также и анимацию, под темный фон красиво смотрится.
2016-11-03 Просмотров: 3472 Комментарий: (8)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарий: 8
FeStemBer
FeStemBer 2016-11-03 02:471
0
Это удачно зашел, давно такой скрипт искал, чтоб кнопка исчезала, есть много виде этого, но там нет такого, чтоб лишняя просто уходила и оставалась так кнопка, которая нужна.
Kolinkor
Kolinkor 2016-11-03 05:352
0
Но тут всяко нужно фиксированную ширину под этот скрипт.
frehodin
frehodin 2017-08-28 09:563
0
Спасибо! Пригодится для моего сайта буду делать на него кнопки.
avatar
ana4220 2018-02-12 15:064
+2
В скрипте двойные строки не нужны.

Код
<a style='position: fixed; bottom: 100px; right: 50px; cursor:pointer; display:none;'
href='#' id='Go_Top'>
<img src="http://zornet.ru/Aben/Gsa/ttop1.png" title="Вверх">
</a>
<a style='position: fixed; bottom: 30px; right: 50px; cursor:pointer; display:none;'
href='#' id='Go_Bottom'>
<img src="http://zornet.ru/Aben/Gsa/ttop2.png" title="Вниз">
</a>
dvvinfo
dvvinfo 2019-02-26 19:435
0
а как отключить эти кнопки при определенном разрешении экрана или при переходе на моб версию
waak
waak 2019-02-26 22:026
0
Смотря где нужно скрывать если в мобильной версии то самый правельный вариант использовать условный оператор который проверяет на то что сайт открыт через мобильный браузер

а если на пк нужно скрыть то тут скрипт нужно переписать и в новой версии указать что если размер тот тот то не показывать данные кнопки

можно по пробивать через медиа запрос в css но не думаю что он поможет так как скрипт должен его проигнорировать и всё ровно показать кнопки точно не скажу так как не использовал данный скрипт да и в нём много лишнего кода
dvvinfo
dvvinfo 2019-02-27 00:257
0
А какой вы скрип используете для кнопок вверх вниз?
Kosten
Kosten 2019-02-27 00:588
0
На этих кнопках не проверял, но так рабочая версия, где нужно задать ширину, при какой будет исчезать элемент.

Перейти на материал
avatar