Быстрый подъем вверх страницы

В этом уроке я расскажу Вам как сделать просмотр длинных страниц более удобным для Ваших посетителей.

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

Для начала давайте добавим кнопку где-нибудь на странице и якорь в самом верху страницы (который будет ориентиром при нажатии на кнопку и поднимет посетителя вверх).

<div id="top"></div> <!--это вверху страницы-->
<div id="message"><a href="#top" id="top-link">Подняться вверх</a></div> <!--это вниз-->

Теперь нам необходимо немного CSS для оформления внешнего вида:

.container {padding: 0 0 70px 0;} /* отступ снизу */

#message
{
display: block;
display: none;

/* ссылка над всеми элементами */
z-index: 999;

/* ссылка не заслоняет полностью текст под ней */
opacity: .8;

/* ссылка всегда на одном и том же месте */
position: fixed;

/* ссылка внизу страницы */
top: 100%;
margin-top: -80px; /* = height + preferred bottom margin */

/* ссылка по центру */
left: 80%;
margin-left: -80px;

/* закругленные углы */
-moz-border-radius: 24px;
-webkit-border-radius: 24px;

/* ссылка большая, заметная и ее легко найти */
width: 300px;
line-height: 48px;
height: 48px;
padding: 10px;
background-color: #000;
font-size: 24px;
text-align: center;
}

#message a { color: #fff; }

И конечно же - jQuery.

$(function () { // run this code on page load (AKA DOM load)

var scroll_timer;
var displayed = false;
var $message = $('#message');
var $window = $(window);
var top = $(document.body).children(0).position().top;

$window.scroll(function () {
window.clearTimeout(scroll_timer);
scroll_timer = window.setTimeout(function () { 
if($window.scrollTop() <= top) 
{
displayed = false;
$message.fadeOut(500);
}
else if(displayed == false) 
{
displayed = true;
$message.stop(true, true).fadeIn(500).click(function () { $message.fadeOut(500); });
}
}, 100);
});
$('#top-link').click(function(e) {
e.preventDefault();
$.scrollTo(0,300);
});
});

Вот и все готово. Удачи!

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.cherrysave.com
Перевел: Максим Шкурупий
Урок создан: 10 Ноября 2009
Просмотров: 68223
Правила перепечатки


5 последних уроков рубрики "Для сайта"

  • Эффекты блочного раскрытия

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

  • 15 полезных .htaccess сниппета для сайта на WordPress

    Если вы хотите существенно повысить уровень безопасности вашего сайта на WordPress, то вам не избежать конфигурации файла .htaccess. Это позволит не только уберечься от целого ряда хакерских атак, но и организовать перенаправления, а также решить задачи связанные с кэшем.

  • 20 бесплатных тем для WordPress в стиле Material Design

    Material Design — это набирающий обороты тренд от Google. В данной подборке собраны бесплатные темы для WordPress, выполненные в этом популярном стиле.

  • 20 сайтов с креативным MouseOver эффектом

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

  • 45+ бесплатных материалов для веб дизайнеров за август 2016

    Под конец месяца предлагаем ознакомиться с набором бесплатных материалов для веб дизайнеров за прошедший месяц.

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 10 Ноября 2009 09:09
    Кальяныч
    +100 оценка
  • 10 Ноября 2009 10:06
    Ahisandra
    Полезная вещь. На некоторых сайтах такое бы не помешало
  • 10 Ноября 2009 10:09
    BassEast
    я бы сказал на многих :) спасибо.
  • 10 Ноября 2009 10:34
    Дмитрий
    внизу сделать кнопку с ссылкой <a href="#top", и будет переход на верх страницы
  • 10 Ноября 2009 14:39
    Кальяныч
    Дмитрий, ты всех убил! :)))))))))))))
  • 10 Ноября 2009 15:30
    Dimka
    Дмитрий, хех типа этого некто незнал))) Но тут плавно появляется кнопочка,плавно в верх подымается.. Вот в чем фишка, если ты недодумался)
  • 11 Ноября 2009 13:45
    Колян
    Дмитрий, ты не эстет. :))
  • 16 Ноября 2009 20:42
    xJlaIIax
    Мне понравилось!
  • 16 Ноября 2009 20:47
    xJlaIIax
    До тех пор пока в Опере и в IE не проверил. Там не работает закругление углов!!!
  • 18 Ноября 2009 07:54
    НеБот
    в IE ничё не работает впринцыпе, в нём нет смысла проверять. Да, в Опере не работает скругление. Ну и что?
  • 21 Ноября 2009 23:06
    Александр
    Конечно не работает так как стили не действительны зато если подключить "jquery.corner" к <div id="message"> то можно сделать практически любые углы не только закруглённые но и зигзаго образные.
  • 5 Января 2010 16:36
    Flok
    Спасибо, применил на своём сайте.
  • 20 Мая 2010 16:25
    Alex_k
    Товарищи, помогите разобраться как это чудо настроить по IE. Потратил сутки - уже бьюсь головой об стол в истерике. У меня в IE это кнопка отображается слева и ещё и не видно её, пока страницу до конца не опустишь. Мне хотя бы как примере - шут с ними с углами. Или может кто знает что нить подобное?
  • 19 Июня 2010 21:11
    XXXS
    Супер)) +12
  • 20 Декабря 2010 16:51
    Dindilin
    С одной стороны прикольная штука, но с другой стороны, я больше консервативен и пользуюсь стандартным средством, которое предложил Дмитрий =)
  • 24 Января 2011 21:37
    Aleksey_72
    Разобрался не сразу, но получилось, реализовал на DLE 9.2, большое спасибо!
  • 28 Апреля 2011 08:19
    dancelot
    В принципе и так неплохо
    <a onclick="$('html, body').animate({scrollTop:0},'slow')">Вверх</a>
    • 29 Марта 2012 06:12
      adminchick
      Спасибо большое :)
  • 4 Августа 2011 01:37
    san85ua
    Народ! А у всех такое?: в общем я поставил данную вещь, вроде всё работает! Но смущает следующий факт! Кликаю кнопку "подняться вверх" - страница поднялась, но если тут же прокручивать скролом страницу вниз, то кнопка не появляется. Нужно только обновить страницу и тогда при очередном прокручивании страницы кнопка появиться... У кого-то такое есть или же это у всех так? Или у меня одного? Что нужно исправить?
  • 12 Октября 2011 14:37
    velik505
    Я такое на чистом Ява скрипте делаю без всяких Джевери и прочих библиотек
  • 3 Ноября 2011 12:12
    vlavrenko
    А как сделать чтобы кликабельна была не только ссылка, но и сама закругленная область? А то, если кликнуть по этой области то она исчезает и приходится скроллить вручную.
    • 2 Апреля 2013 18:29
      alexz83
      Надо поменять
      <div>
      должно быть так
      <a href="#top" id="top-link"><div id="message">Поднятся вверх</div></a>
  • 8 Февраля 2012 17:57
    reeadmin
    Я поставил скрипт, подключил его, все норм робит, но кнопка появляется при малейшей прокрутке, так не пойдет я хотел бы как на данном сайте чтоб появлялся после Н-нного промежутка от "потолка" сайта
  • 12 Февраля 2012 02:40
    krahatulka
    +100 :)
  • 18 Февраля 2012 22:38
    lakita
    а можно для чайника поподробнее в какую строчку вставить CSS и еще jQuery.целый вечер мучаюсь,только методом тыка ничего не получается,уж извините...
  • 29 Марта 2012 17:44
    FrostVS
    А на друпал то поставить можно такую весчь? Куда её в код странички или шаблона?
  • 7 Апреля 2012 07:26
    MaratM
    СПС автор!
  • 28 Мая 2012 23:00
    semen74
    Неужели нельзя подробнее рассказать, как это все прикрутить... А то - " И конечно же - jQuery. "! А дальше тыкайтесь сами. Знаю, что не дождусь тут вразумительного ответа.
    • 26 Июня 2012 10:22
      Неподарок
      Спасибо автору, применил -всё получилось. А можно jQuery в отдельный файл пихать, а потом еще в отдельную папку? что-то я попробовал - не вышло...
  • 12 Августа 2012 22:22
    olenkinWEB
    Спасибо большое!) воспользовался)
  • 24 Ноября 2012 01:09
    Urtekent
    У меня вверх не прокручивается .Что сделать?
  • 4 Марта 2013 10:53
    icyberwind
    И ничего не работает. Не прикручивается ваще. Что-то для чайников видать упущено...
  • 3 Мая 2013 17:41
    yurecnt
    Не работает с оригинальными JQuery 1.9.1 и 2.0... Если подставляю библиотеку из примера - все норм, но с оригинальными - лажа... Опять же с библиотекой из скрипта не работают другие функции - вкладки например (((
    • 26 Февраля 2014 14:48
      pulwar
      Замени $.scrollTo(0,300); на $('body,html').animate({scrollTop: 0}, 'slow');
  • 21 Июня 2013 16:06
    dima_30
    вроде все норм но при нажатии на кнопку ничего не происходит (не поднимается в вверх)
    • 26 Июля 2013 00:10
      ТРАСФОРМАТОРЫ
      ВСЕ В НОРМЕ DLE 9.8
  • 13 Октября 2013 23:28
    owx_
    Все заработало с первого раза. Чайникам: сделайте все так же, как в исходниках - всё получится.
  • 24 Мая 2015 23:06
    DMstyle
    А кто нибудь знает как сделать после нажатия кнопки страница поднялась вверх
^ Наверх ^