г. Владимир, пр. Ленина 15а, офис 410

8 (499) 404-14-01
(телефон офиса)

8 (904) 259-97-29
(ватсапп, вайбер, телеграмм)

пн-пт: с 09.00-18.00
e-mail: info@pavelsonar.net

Приветствую. Практически на всех современных сайтах присутствует кнопка наверх!

Реализовать для своего сайта не сложно, используя js и стили css. Код представлен ниже.

Добавляем в самый низ, исполняемого файла шаблона (index.php) скрипт:

  1. <script type="text/javascript">
  2. jQuery(document).ready(function(){
  3. jQuery(window).scroll(function () {
  4. if (jQuery(this).scrollTop() > 100) jQuery('a#scroll_up').fadeIn();
  5. else jQuery('a#scroll_up').fadeOut(400);
  6. });
  7. jQuery('a#scroll_up').click(function () {
  8. jQuery('body,html').animate({
  9. scrollTop: 0
  10. }, 800);
  11. return false;
  12. });
  13. });
  14. </script>
  15. <a id="scroll_up" href="#">Вверх</a>

А в файл CSS шаблона вставляем код, которые и отражает вид и положение кнопки:

  1. a#scroll_up {
  2. position: fixed;
  3. top: 95%;
  4. right: 40px;
  5. display: none;
  6. width: 90px;
  7. height: 21px;
  8. text-align: center;
  9. font: 12px Verdana;
  10. text-decoration: none;
  11. color: #fff;
  12. background: #3b9cc9;
  13. padding-top: 5px;
  14. opacity: 0.9;
  15. filter: alpha(opacity=90);
  16. }

Пользуемся, смотрим, редактируем, говорим спасибо!

 

Рекомендую отличный хостинг