Как сделать кнопку наверх на сайте?

Кнопка наверх с помощью jQuery

Рассмотрим как сделать кнопку "НАВЕРХ" для своего сайта.

Кнопку будем реализовывать с помощью библиотеки jQuery.

Код подключения библиотеки jQuery и скрипт событий:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> $(function() { $(window).scroll(function() { if($(this).scrollTop() != 0) { $('#toUp').fadeIn(); } else { $('#toUp').fadeOut(); } }); $('#toUp').click(function() { $('body,html').animate({scrollTop:0},500); }); }); </script>

Его нужно разместить перед тегом </head> вашего файла шаблона index.php

Придадим красивый внешний вид кнопке. Для этого добавим в файл стилей сайта:

#toUp { width: 100px; text-align: center; padding: 50px; position: fixed; bottom: 50px; right: 0px; cursor: pointer; color: #666666; text-decoration: none; background-image: url(/images/Upload-icon.png); background-repeat: no-repeat; background-size: 90px; }

Для вызова кнопки в этот же файл index.php перед закрывающимся тегом </body> вставить:

<a id="toUp"></a>

Готово! После обновления страницы сайта кнопка "Наверх" появится в том месте как указано в css стилях (в примере это правый угол), когда вы будете прокручивать страницу вниз.

 

Обновлено 07.04.2016 18:55