UnRealName
@UnRealName

Как сделать кнопку скроллинга «наверх»?

Читал статью про юзабилити, и там был хороший совет, что нужна кнопка "Наверх" для скроллинга.

На этой же странице 1ps.ru/blog/ctr/speczializirovannyij-internet-maga... есть и пример этой кнопки, который устраивает меня своим минимализмом.

Подскажите, пожалуйста, как мне сделать также? Естественно будут рад увидеть готовые решения.
  • Вопрос задан
  • 290 просмотров
Решения вопроса 1
@Screpka
webmastermix.ru/raznoe/300-knopka-vverkh-dlya-sait... первая ссылка по запросу "кнопка для скроллинга на верх страницы"
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
In4in
@In4in
°•× JavaScript Developer ^_^ ו°
.button{
   opacity: 0;
   position: fixed;
   color: white;
   font-size: 70px;
   visibility: hidden; 
   text-align: center;
   transition: all 0.5s; 
   background: #343434;
   border-radius: 70px;
   display: inline-block;
   right: 50px; bottom: 30px;
   width: 70px; height: 70px;   
}

.visible{
  visibility: visible;
  opacity: 1;
}


<a href="#toTop" class="button">↑</a>

(function($scrollButton, $win){

  $(document).scroll(function(){
     $scrollButton.toggleClass("visible", $win.scrollTop() > 300);
  });

  $scrollButton.click(function(e){
       e.preventDefault();
       $("body, html").animate({scrollTop : 0}, 500); 
  });

})( $(".button"), $(window) );


jsfiddle.net/In4in/fLfL6n4j
Ответ написан
Комментировать
UnRealName
@UnRealName Автор вопроса
Спасибо. Еще понравился вариант кнопки как здесь: www.seonews.ru/events/riw-2015-eshche-raz-o-plyusa...
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
05 нояб. 2024, в 19:14
100000 руб./за проект
05 нояб. 2024, в 19:07
12000 руб./за проект
05 нояб. 2024, в 17:38
150000 руб./за проект