» »

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


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

Можно найти много в интернете кнопку вверх, но здесь идет с плавной прокруткой. Точнее 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 - здесь вы можете поставить также и анимацию, под темный фон красиво смотрится.
03.11.2016 Просмотров: 344 Комментарий: (2)

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

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

Комментарий: 2
FeStemBer
FeStemBer 03.11.2016 02:471
0
Это удачно зашел, давно такой скрипт искал, чтоб кнопка исчезала, есть много виде этого, но там нет такого, чтоб лишняя просто уходила и оставалась так кнопка, которая нужна.
Brung
Brung 03.11.2016 05:352
0
Но тут всяко нужно фиксированную ширину под этот скрипт.
avatar