Кнопка "вверх" на сайте где контента больше чем 3 экрана просто необходима. Я, например, всегда ищу такую когда проскролю сайт даже на несколько блоков и мне снова нужно вернуться на верх.
Я перепробовал много способов, от чистого css до разных плагинов js (как же я их не люблю...). В итоге написал сам идеальное решение под любой браузер. Страничка плавно поднимается вверх, не моментально, что смотрится очень даже хорошо.
Приступим. Новички - читаем все по порядку. Профи и те кто уже работал с js на сайте - могут пропустить следующий абзац.
В head обязательно должна быть подключена библиотека js. Можно ее скачать отсюда библиотека jquery. Если вместо скачивания открылся код, то создайте в корне Вашего сайта папку js (если таковой нет, что будет странно) и в ней создайте файл jquery-3.4.0.min.js. Далее между head в сайте подключаем <script type="text/javascript" src="/js/jquery-3.4.0.min.js"></script>. Есть способ попроще, просто подключить через сервисы гугла: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> (вставляем также между head).
Итак, библиотека подключена, будем писать код самой функции:
<script>
$(document).ready(function(){
// плавное перемещение страницы к нужному блоку
$("a").click(function () {
elementClick = $(this).attr("hreff");
destination = $(elementClick).offset().top;
$("body,html").animate({scrollTop: destination }, 500);
});
});
</script>
Лучше вставить код в блок который есть на каждой странице, например в footer, чем дублировать его на все.
Разберемся... Что мы здесь видим? При клике по тексту/картинке/div-у обернутому в тег <a> с параметром hreff (все правильно, 2 буквы "f"), нас будет переносить к элементу с id = "значение внутри параметра hreff". Перед значением пишем #. Значение 500 указывает на скорость перемещения к блоку, в данном случае 0.5 секунд.
Для примера:
Вверху страницы вставляем:
<a id = "get_top"></a>
В футер (или просто в самый низ страницы, чтобы с z-index было меньше конфликтов):
<a hreff = "#get_top" style = "opacity:0.8; position:absolute; top:-60px; right:60px;"><img style = "width:40px;" src = "/../img_cab/narrow_up.png" /></a>
В итоге получится кнопка справа внизу, немного прозрачная, ширина 40px. Кнопку можно изобразить в фотошопе или поискать в поиске яндекса по запросу "стрелка вверх png". Вместо картинки можно вставить текст. Если кнопка прячется за какими-нибудь "абсолютными" элементами сайта, то прикрутите ей z-index:99999999999; например или впишите свой уровень, если конечно их считаете как правильный верстальщик)).
Кстати, данную штуку можно применять не только для кнопки "вверх", но и для перемещения к любому элементу сайта. Просто добавляем еще кнопок и "якорей" (это я про это: <a id = "get_top"></a> ), с разными именами. Код функции дублировать не нужно, она готова отрабатывать все элементы.
P.S.: Почему "hreff", а не "href"? Потому что во втором случае в некоторых браузерах нас сначала переносит без анимации к якорю куда хотели перенестись, затем назад и потом уже красиво и анимировано переносит, что не по красоте совсем... В каком-то браузере даже обновлялась страничка и потом переносило куда нужно...
У меня на сегодня все! Спасибо что прочитали до конца) Люблю комментарии ;) Предлагайте свои решения (только проверенные).