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