Скрипт подъёма вверх страницы

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

Т.е. у Вас есть длинная статья, которую человек долго прокручивал вниз, наконец-то он ее дочитал и теперь ему хочется подняться наверх страницы, и тут он видит небольшую стрелочку, нажав на которую, он быстро и плавно поднимается вверх страницы и ему не надо крутить колесико на мышке или пользоваться скролом.

Данная кнопка появляется только тогда, когда человек прокрутил страницу немного вниз.

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

Скачать исходники

1. Для начала нам нужно подключить библиотеку JQuery. Тут 2 варианта, либо заходим на сайт jquery.com, скачиваем библиотеку, сохраняем себе на сайт и подключаем, либо подключаем используя вот такую кострукцию:


<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Вставляем это между тегами head

2.Чтобы скрипт работал, вставьте себе на сайт вот такой код. Вставьте его либо сразу после тега body, либо перед его закрытием.


<a href="#" class="scrollup">Scroll</a>
<script type="text/javascript">
$(document).ready(function(){

$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('.scrollup').fadeIn();
} else {
$('.scrollup').fadeOut();
}
});

$('.scrollup').click(function(){
$("html, body").animate({ scrollTop: 0 }, 600);
return false;
});

});
</script>

3. И последний штрих — это CSS.


.scrollup{
width:40px;
height:40px;
opacity:0.3;  /*Здесь можете менять значение от 0 до 1*/
position:fixed;
bottom:50px;
right:100px;
display:none;
text-indent:-9999px;
background: url(images/icon_top.png) no-repeat; /*Путь к картинке, на которую будут нажимать для подъема наверх страницы*/
outline:0;
}

В данном примере кнопка подъема находится снизу справа, Вы можете изменять расположение меняя значения bottom и right.

Как Вам данный скрипт? Напишите в комментариях, что Вы думаете о данном скрипте, полезен ли он для Вас?

Комменты

  • чот тут такой реализации не видно?!

  • Иннокентий: 09-08-2016 в 23:54

    Искал реализацию скрипта подъема вверх страницы. Самый краткий вариант + рабочий. Спасибо.

  • Спасибо,все работает.

  • Единственный походу рабочий вариант, где-то видел аж десять способов один из них такой же простой как этот,но ……не рабочий. . Здесь все предельно ясно и с html и css я только в этот вариант у себя добавил css прозрачности при наведении .
    scrollup:hover{opacity:1;} здесь можете глянуть как работает http://mixkuponov.ru/
    Спасибо.

  • Спасибо,Дмитрий))))) Очень очень пригодилось))

  • Не было видно картинки, вместо неё белый квадрат. Исправляем:
    В css строку 10: background: url(images/icon_top.png) no-repeat;
    меняем на: background: url(«/images/icon_top.png») no-repeat;
    Размер картинки должен быть 40х40 пикселей.

    • Спасибо) , но у меня в итоге только так воспринял: background: url(../images/icon_top.png) no-repeat;

  • Здраствуйте, Дмитрий!
    Я делаю сайт на языке php, как можно сделать карту сайта?

    • Дмитрий Валак: 04-10-2013 в 9:37

      Здравствуйте. Попробуйте воспользоваться генератором карт сайта. Их большое множество, наберите в гугле «генератор карт сайта».

  • Добрый день Дмитрий!
    Будет ли работать данный скрипт на презентационном мультимелийном диске. По сути это тот же сайт, только не на сервере, а на диске, правда на нем нет никаких движков, собираю в Dreamweaver.

  • Мне кажется, Вы забыли тут упомянуть о том, что в CSS значения width и height должны быть равны данным значениям самой картинки.

  • Спасибо Дмитрий! Надо попробовать

  • Прошу прощения! Скрипт отлично и плавно работает, но кнопка появляется только когда высота страницы два и более прокрута колёсиком мышки.

    Спасибо, Дмитрий!

  • Скрипт отличный, но почему-то работает только на главной странице. =(

  • а у меня вместо стрелочки тупо белый фон

  • В том-то и дело, что путь стоит верный

  • Здравствуйте, у меня возникла проблема. Не отображается картинка стрелочки, хотя ссылка справа внизу есть и если ее нажать поднятие произойдет. Не подскажите в чем дело?

    • Дмитрий Валак: 25-04-2013 в 16:24

      Здравствуйте. Скорее всего неверно прописан путь к изображению в CSS.

  • Дмитрий, огромное спасибо за Ваши полезные уроки!

  • Отличная функция. Особенно, если сайт очень большой, и когда не совсем удобно крутить мышкой, то это то, что нужно.

  • Дмитрий так а почему если в адресе к JQuery не дописать http: то скрипт не работает?

    • Дмитрий Валак: 18-04-2013 в 14:13

      В исходниках без http работает. Если не работает — допишите, в чем проблема.

  • Дмитрий, благодарю. Полезняк! :-)

  • Здравствуйте, Дмитрий!

    Спасибо за полезный скрипт!

    Я подписался на Вашу рассылку, чему очень рад!
    Просто поражаюсь на Ваши знания, все четко и конкретно объясняете, да и понятно!

    Спасибо за Ваши труды!

  • Класная штучка ! Спасибо.
    Юрий

  • Давно хотел поставить на сайт скрипт плавного подъёма страницы вверх. Вещь несомненно полезная, кода немного, работает надёжно!
    Огромное спасибо, Дмитрий!

  • Здорово! А как быть если сайт на каком-нибудь движке? Например, на ВордПрессе или на Джумле?

    • Дмитрий Валак: 17-04-2013 в 8:25

      Все тоже самое. Подключаете библиотеку в файле header.php там же можете вставить код (под номером 2) после тега body и в CSS занести те стили.

  • Проще сие сделать средствами HTML: картинка (кнопка) внизу со ссылкой на якорь, который установить под шапкой блога.