Создаем замечательный скрипт прокрутки наверх страницы

Сегодня я научу вас делать самый лучший скрипт наверх страницы. А почему он самый лучший? Потому что положение кнопки будет удобно задано для сайтов с ограниченной шириной. Конечно, это легко можно изменить, поэтому читаем далее...

Я считаю, что в условиях присутствия огромных мониторов вполне целесообразно ограничивать ширину сайта. Потому что неудобно читать текст на ширине, например, 1800 пикселей. Глаза разбегаются и очень устают. Отсюда низкая работоспособность, плохой результат со всеми вытекающими последствиями. Но, не будем отвлекаться от темы. Большинство кнопок "Наверх", которые позволяют переместиться к началу страницы расположены справа и позиционированы относительно края браузера. А если у нас огромный монитор и получается такая ситуация:

Мне кажется, что гораздо удобнее зафиксировать кнопку здесь:

Но как позиционировать кнопку со свойством position:fixed - ведь она позиционируется относительно окна браузера? Об этом чуть позже, для начала скрипт. Копируем его до закрывающего тега </head>, не забываем предварительно подключить библиотеку JQuery!

<script>
$(function(){
  $.fn.scrollToTop=function(){
    $(this).hide().removeAttr("href");
    if($(window).scrollTop()!="0"){
        $(this).fadeIn("slow")
  }
  var scrollDiv=$(this);
  $(window).scroll(function(){
    if($(window).scrollTop()=="0"){
    $(scrollDiv).fadeOut("slow")
    }else{
    $(scrollDiv).fadeIn("slow")
  }
  });
    $(this).click(function(){
      $("html, body").animate({scrollTop:0},"slow")
    })
  }
});
$(function() {$("#go-top").scrollToTop();});
</script>

Скопировали? Отлично. В скрипте для нас важно - это #go-top - это ID нашей кнопки. Теперь добавим нашу кнопку:

<a href="#" id="go-top"></a>

И стили для нее:

#go-top {
	display:block;
	width:34px;
	height:34px;
	position:fixed;
	right:50%;
	margin-right:-500px;
	bottom:100px;
	background:url(images/go-top.png) no-repeat 0 0;
	cursor:pointer;
	opacity:0.8;
}
#go-top:hover {
	opacity:1;
}

Теперь поговорим про стили. Что мы тут делаем? Разберем только самое интересное

• position:fixed; - задает фиксированное положение элемента. Чтобы он не перемещался при прокрутке страницы
• right:50%; - задает позицию элемента. С этим значением он будет ровно по центру экрана - т.к. правый отступ будет составлять 50%
• margin-right:-500px; - именно это свойство позволяет отодвинуть элемент к краю сайта. В моем примере сайт имеет ширину 1000px. Поэтому здесь используется половина
• bottom:100px; - нижний отступ от края страницы

После этих манипуляций у нас получится что-то типа:

Вот и все, кнопка, в принципе, работает!

Но у такой кнопки есть 1 маленький, но очень веский недостаток. Если окно браузера начать сужать, то как только оно дойдет до границы сайта - кнопки уже видно не будет. Что делать?

Тут все тоже очень просто. Мы знаем ширину сайта. И поэтому можем в определенный момент поменять положение кнопки. Для этого нам понадобится скрипт, который отслуживает ширину окна браузера - Измерение ширины окна и применение стилей / альтернатива медиа запросам, подключаем и настраиваем таким образом, чтобы при сжатии окна браузера до определенной величины нашей кнопки присваивался класс go-top. С помощью которого мы будем менять стили. В моем случае скрипт получился следующий:

<script>
$(function() {
    $(window).resize(function() {
        var width = $(window).outerWidth();
        if (width < 1025) {
            $("#go-top").addClass("go-top");
        } else {
            $("#go-top").removeClass("go-top");
        }
    });
 
	$(window).resize();
});
</script>

Теперь к стилям:

.go-top {
	margin-right:0 !important;
	right:10px !important;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	transition: all 0.5s ease;
	opacity:0.5 !important;
}

Вот и все! Теперь наша замечательная кнопка готова полностью!