В этой заметке показан простой и весьма элегантный пример реализации кнопок "Вверх" и "Вниз" без использования картинок, и вариант небольшого скрипта jQuery для плавной прокрутки страницы в указанном направлении.
Способ хорош тем, что изначально, когда страница поднята вверх, кнопка "Вверх" скрыта, когда прокручена до низа - скрыта кнопка "Вниз", параметры высоты, на которой появляются кнопки регулируется.
DEMO
Итак, HTML код кнопок выглядит так:
<div class="go-up" title="Вверх" id='ToTop'>⇧</div>
<div class="go-down" title="Вниз" id='OnBottom'>⇩</div>
Для реализации указателей направления прокрутки - стрелок, применяются спецсимволы юникода, которые просто копируются и вставляются внутри тега. Такой подход позволяет обойтись без использования изображений, добавляя плюс к оптимизации, а также позволяя легко настроить и, по необходимости, быстро изменить внешний вид кнопок.<div class="go-down" title="Вниз" id='
При использовании стандартных спецсимволов в дизайне элементов сайта нужно сделать две проверки:
1) проверить кодировку веб-страницы - должна быть UTF-8;
HTML-код размещаем где удобно в шаблоне, внешний вид и расположение кнопок задается в CSS (код стиля с демонстрационной страницы):1) проверить кодировку веб-страницы - должна быть UTF-8;
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
2) проверить данный символ на кроссбраузерность - отображается ли он во всех браузерах, бывает, что нет;.go-up, .go-down {
display: none;
position: fixed; /*позиционирование*/
z-index: 9999; /*поверх все элементов на странице*/
right: 15%; /*положение на странице, если слева - left*/
background: #4F4F4F;
border: 1px solid #ccc;
border-radius: 5px;
cursor: pointer;
color: #fff;
text-align: center;
font: normal normal 42px/42px sans-serif;
text-shadow: 0 1px 2px #000;
opacity: .5;
padding: 3px;
margin-bottom: 5px;
width: 42px;
height: 42px;
}
.go-up { bottom: 60px; }
.go-down { bottom: 10px; }
.go-down:hover,
.go-up:hover {
opacity: 1;
box-shadow: 0 5px 0.5em -1px #666;
}
Благодаря фиксированному позиционированию кнопки будут находится, так сказать, всегда под рукой, и теперь остается только добавить скрипт jQuery, который по клику будет плавно прокручивать страницу в вверх или вниз: display: none;
position: fixed; /*позиционирование*/
z-index: 9999; /*поверх все элементов на странице*/
right: 15%; /*положение на странице, если слева - left*/
background: #4F4F4F;
border: 1px solid #ccc;
border-radius: 5px;
cursor: pointer;
color: #fff;
text-align: center;
font: normal normal 42px/42px sans-serif;
text-shadow: 0 1px 2px #000;
opacity: .5;
padding: 3px;
margin-bottom: 5px;
width: 42px;
height: 42px;
}
.go-up { bottom: 60px; }
.go-down { bottom: 10px; }
.go-down:hover,
.go-up:hover {
opacity: 1;
box-shadow: 0 5px 0.5em -1px #666;
}
$(function(){
if ($(window).scrollTop()>="250") $("#ToTop").fadeIn("slow")
$(window).scroll(function(){
if ($(window).scrollTop()<="250") $("#ToTop").fadeOut("slow")
else $("#ToTop").fadeIn("slow")
});
if ($(window).scrollTop()<=$(document).height()-"999") $("#OnBottom").fadeIn("slow")
$(window).scroll(function(){
if ($(window).scrollTop()>=$(document).height()-"999") $("#OnBottom").fadeOut("slow")
else $("#OnBottom").fadeIn("slow")
});
$("#ToTop").click(function(){$("html,body").animate({scrollTop:0},"slow")})
$("#OnBottom").click(function(){$("html,body").animate({scrollTop:$(document).height()},"slow")})
});
if ($(window).scrollTop()>="250") $("#ToTop").fadeIn("slow")
$(window).scroll(function(){
if ($(window).scrollTop()<="250") $("#ToTop").fadeOut("slow")
else $("#ToTop").fadeIn("slow")
});
if ($(window).scrollTop()<=$(document).height()-"999") $("#OnBottom").fadeIn("slow")
$(window).scroll(function(){
if ($(window).scrollTop()>=$(document).height()-"999") $("#OnBottom").fadeOut("slow")
else $("#OnBottom").fadeIn("slow")
});
$("#ToTop").click(function(){$("html,body").animate({scrollTop:0},"slow")})
$("#OnBottom").click(function(){$("html,body").animate({scrollTop:$(document).height()},"slow")})
});
Значение 250 в скрипте, показывает:
- в первой строке - кнопка появится когда страница будет прокручена больше чем на 250 пикселей;
- во второй, что исчезнет когда до верха страницы останется меньше чем 250 пикселей.
Не забываем, что для работы скрипта требуется подключить к сайту фреймворк jQuery.- в первой строке - кнопка появится когда страница будет прокручена больше чем на 250 пикселей;
- во второй, что исчезнет когда до верха страницы останется меньше чем 250 пикселей.
На этом пока что все, всем спасибо за внимание.
©http://magentawave.com
скрипт jQuery Не могу разместить перед код
ОтветитьУдалитьВ Blogger, так он написан на XML скрипты с условиями ЕСЛИ - if и вариантами И - &&, ИЛИ - ||, БОЛЬШЕ - > и т.д. надо заключать в тег-комментарий CDATA:
Удалить<script type='text/javascript'>
//<![CDATA[
*ТУТ СКРИПТ*
//]]>
</script>
Можете сразу все скрипты в эту обертку и кидать, а не оборачивать каждый отдельно.
Благодарю! Всё получилось. Эффект от CSS в данном случае неописуем! :) Если честно, установив первые 2 строки и сам скрипт, я уже собралась возвращать всё обратно (так было ужасно не красиво, да ещё и не с той стороны). Но после вставки стилей проблема, естественно отпала! Так классно! ;)
ОтветитьУдалитьТак на то он, CSS, и нужен, что все оформить как надо :)
УдалитьОдно маленькое, но важное уточнение...
ОтветитьУдалитьОказывается не в каждом шаблоне по умолчанию подключен jquery.
В моем ("Корпорация Чудеса" или Awesome inc.) его не было, и скрипт естественно не исполнялся. Поэтому:
если вдруг скрипт не работает, кнопочки не появляются и настроение ухудшается, в-первую очередь проверяем, и если не находим - добавляем в шаблон до тега </head> вызов jquery.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
а в целом - КЛАССНЫЕ СТРЕЛОЧКИ!!! Спасибо за подробный мануал.
В стандартном шаблоне он, жиквери, ни у кого не подключен, его надо подключать самостоятельно. Я этот момент опустил, т.к. думаю это само-собой понятно, но теперь думаю стоит обновить статью и добавить этот пункт. Спасибо за корректировку.
УдалитьНе знаю как присутствующие, а у меня в школе информатика была та еще: мы изучали Бэйсик, линии чертили благодаря формулам, а мышек в глаза не видели)) Поэтому компьютерной грамотности учусь сама, в том числе и тому, что касается блога. Так вот, стрелочки это удобно бесспорно. Но ведь реально они не нужны, когда знаешь малюсенькую хитрость (обнаружена случайно, работает везде)
ОтветитьУдалитьЕсли нажать на КОЛЕСИКО у мышки в любом месте текста (кроме изображения и ссылки), то появится "нечто" в кружочке и при движении мышкой вверх или вниз, а иногда и в стороны страница перематывается. В зависимости от того, как далеко от центра отведете курсор, скорость увеличивается или уменьшается. Несомненный плюс этого нехитрого метода в том, что остановить можно в любом месте и в любой момент. А стрелочки только до самого верха или до самого низа.
Если же навести курсор на ссылку или изображение, которое является ссылкой, и нажать на КОЛЕСИКО мышки,то ссылка откроется в новой вкладке.
Впрочем, как мне написали в комментариях, это первый класс вторая четверть. Наверняка, Вы об этом знаете, но возможно, что для ваших читателей это станет сюрпризом.
Я думаю что каждый кто пользуется компьютерной мышкой об этом знает :) Тут вопрос на сколько кому и что удобно, я например вообще этой функцией не пользуюсь и когда она случайно включается очень нервничаю, потому что не всегда она к месту и удобна. И к вашему комментарию можно добавить что и клавиатуре есть соответствующие кнопки PageUp PageDown End и Home, но кто ими пользуется?
УдалитьНо вы конечно молодец что делитесь такой важной и полезной информацией, за что вам огромное спасибо.
Да, про кнопки знаю, но в темноте ночи их искать не очень удобно, да и мышка уже в руке. Я прошу прощения за свои глупые комментарии, уже пожалела, что написала их Мои статьи это детский лепет по сравнению с вашими, но мои читатели это простые люди и им как раз нужна информация изложенная максимально просто. А про стрелочки у меня заказывали информацию, но я просто вышлю ссылку на вашу статью. Та девушка продвинутая, разберется.
УдалитьНу что вы! Не стоит извиняться, все вы верно заметили, а из личного опыта я могу сказать одно, что "простым" людям не нужна информация им нужен готовый результат: скопировал - вставил - радуешься. Но у этого способа есть очень много недостатков, по-этому я просто перестал писать такие посты и дублировать однообразный контент, которого в сети уже "over 99999999999" ответов, как бы популярно это не было.
УдалитьКуда вставлять эти коды то, АА???? Подскажите будьте так любезны
ОтветитьУдалитьСпасибо. Все получилось. Только я скрипт от jQuery поместил в отдельный файл и к нему путь указал. Сделал так, для того чтобы соблюдалась валидность кода на странице.
ОтветитьУдалитьСпасибо
ОтветитьУдалитьу меня был другой вариант , Ваш лучше!
ОтветитьУдалитьСПАСИБО!
У меня ругается на знак "<" что делать?
ОтветитьУдалитьЗапишите его таким же образом , как записали сюда (в комментарий) или используйте UTF символы
УдалитьА на wordpress эти кнопки установятся?
ОтветитьУдалитьКонечно, как и на любой другой движок, для этого нет никаких препятствий :)
Удалитьподскажите пожалуйста пути к файлам, куда вставить эти коды IP. Board 3.4.5
ОтветитьУдалитьК сожаления не могу вам помочь, т.к. не знаком этой системой.
УдалитьПодскажите пожалуйста, как вместо стрелок вставить свои картинки? Если возможно - код полностью, а то я чайник в этом деле.
ОтветитьУдалитьДа, конечно. Вот готовый пример - http://jsfiddle.net/ZqexF/
УдалитьСкрипт тот же(из статьи), ссылки на картинки в коде CSS замените на те, которые желаете использовать вы.
Спасибо!!! Прикрутил к своему сайту без проблем :)
ОтветитьУдалитьпомогите разобраться как прикрутить этот скрипт в форуму ipb 3.4.5
ОтветитьУдалитьmail - kremak_ip@mail.ru
Если у вас есть доступ к HTML коду, то воспользоваться этим скриптом не составит труда. Я же просто не знаю как там у вас все устроено, может кто еще подскажет.
УдалитьСпасибо. Все получилось. Красиво сделано.
ОтветитьУдалитьКак изменить скорость прокрутки?
ОтветитьУдалитьВот в этом месте скрипта
Удалить$("html,body").animate({scrollTop:0},"slow")}
замените "slow" на значение в цифрах - время за которое будет прокручена страница.
Какая скорость стоит у вас на этой странице?
УдалитьЗдесь, такая же как и в статье, указано - "slow"
УдалитьЗдравствуйте, вы можете выложить код кнопки "ответить" на это страницы и описать как ее сделали
ОтветитьУдалитьНа данный момент такого желания у меня нет, но позже я возможно напишу что-то подобное.
УдалитьПодскажите, пожалуйста, можно ли увеличить расстояние между кнопками?
ОтветитьУдалитьМожно, для селектора .go-up увеличьте значение свойства bottom. Например:
Удалить.go-up {
bottom: 100px;
}
Большое спасибо!!!:-)
ОтветитьУдалитьА как сделать так чтобы кнопка вверх была вверху справа а кнопка вниз - внизу справа независимо от разрешения
ОтветитьУдалитьможно изменить конечно расстояние между кнопками но если разное разрешение может по разному отображаться
Вам нужно просто изменить положение элемента (кнопки). Например:
УдалитьВместо
.go-up { bottom: 60px; }
Укажите
.go-up { top: 10px; }
Про это есть в этом блоге статья
http://www.magentawave.com/2012/03/fixed-elements-in-blogger.html
Спасибо пригодилась данная инфа...
ОтветитьУдалитьБольшое спасибо, пригодилось. Самое интересное и простое (кода минимум) решение кнопок вверх вниз, которое нашел.
ОтветитьУдалитьНе вставляются спецсимволы юникода ⇧⇩. Просто превращаются в квадратики. Каким редактором вставлять?
ОтветитьУдалитьЗдравствуйте.
ОтветитьУдалитьМожно ли конкретно в этом скрипте реализовать следующее: при нажатии кнопки вниз - возвращаешься на место, откуда нажал на кнопку вверх?
Добрый День,
ОтветитьУдалитьПодскажите как сделать прокрутку с определнным шагом ? В даном случае стрелки просто переводят вниз или вверх
Самое лучшее решение, которое я нашел на сегодняшний день, для своего форума. Спасибо!
ОтветитьУдалитьУ меня этот скрипт конфликтует со скриптом увеличения фото. Вместе не работают. По отдельности - отлично.
ОтветитьУдалитьЗаменил имя $ на jQuery. Работают оба, но скрипт прокрутки срабатывает только один раз. Потом кнопки исчезают. Что делать?
Здравствуйте. И снова я вам пишу.
ОтветитьУдалитьНе совсем разобралась... Точнее... У меня получилось установить эти кнопки только как виджет.
Это у меня в HTML виджете -> http://s1.radikale.ru/uploads/2015/11/13/cbe1f3ba836563d4f8721e25fd30ac7c-full.png
Это в CSS -> http://s1.radikale.ru/uploads/2015/11/13/1224ef6dfcc1c8cd88506114d2f5bc1e-full.png
Прошу прощения за беспокойство. Однако прошу понять. Я только учусь обращаться с "Блоггер". Давно как-то уже зарегистрировалась, но... Тогда мне это казалось сложным очень. Сейчас я хоть чего-то добилась -> http://akemi-womenssecrets.blogspot.ru/ .
После того как в первый раз зарегистрировалась и махнула рукой... Пошла на wix. Стоит ли говорить что после того как я почитала о детальных настройках и возможностей Blogger, я сразу вернулась? =)
Ну ладно, это было лирическое отступление. Прошу извинить.
Жду вашего ответа. Спасибо заранее! =)
P.S. Скриншот кнопочек -> http://radikale.ru/uploaded/2015/11/13/6cd8a5c549a689d616789ed624579b80-full.png.html
Я что-то с трудом понял суть проблемы)) И вместо того чтобы слать картинки с кодом, лучше сделайте нормальный доступ к нему на вашем сайте по средствам браузера, а не выводите таблички с надписями "Копирование запрещено" с помощью JavaScript, по секрету вам скажу, что для того, кто захочет украсть ваш контент, это не преграда, достаточно просто отключить в браузере JS и все, а трудностей и ненужный код в шаблоне создает много.
УдалитьЗдравствуйте!
ОтветитьУдалитьА можно ли модифицировать скрипт, чтобы было реализовано ПОСТРАНИЧНОЕ ЛИСТАНИЕ.
Например как здесь http://sergeistrelec.ru/article/ (не реклама)
Конечно можно, но то что там сделано, скорее не "постраничное листание", а прокрутка к заголовку, относительный пример показан здесь -
Удалитьhttp://www.magentawave.com/2016/10/subtitles-automatic-menu.html
У кого подключена jQuery, а она подключена уже везде наверно. Блин как сформулировать вообщем при добавлении jQuery переставал работать lightbox без добавления jQuery не работал сам скролл я уже отказался от этого классного скролла я в скриптах не шарю. И начал тестировать другие варианты благо сайтов море и возмутило меня что вот какой-то убогий скролл работает, причем используя ту же jQuery и этот вот классный нет. Методом тыка и пляски с бубном заменил все доллары $ на слово jQuery и все заработало и lightbox и скролл добавлять библиотеку дополнительно не надо
ОтветитьУдалитьБлин я по ходу никогда не уйду отсюда, забыл в первом комментарии написать про async или defer что бы скролл загружался только после того как загрузится страница JCE переделывает код на < script src="/scroll.js" defer="defer" type="text/javascript">< /script > сам скролл работает, только я не могу понять работает или нет defer. Поэтому вопрос, код который я написал выше он, скажем так, полностью выполняется?
ОтветитьУдалитьВ отношении первого вашего коммента, думаю следовало бы обратить взоры на jQuery.noConflict(); , т.к. причина может быть в том, что к сайту одновременно подключены разные JS библиотеки.
Удалить//api.jquery.com/jquery.noconflict/
//jquery.page2page.ru/index.php5/Предупреждение%20конфликтов
еще советовал бы скрипты jQ размещать в конструкции типа:
(function($) { /*первая строка*/
$(function() {
// ТУТ ОДИН БОЛЬШОЙ JQUERY СКРИПТ
})
})(jQuery);
Относительно второго, теряюсь в догадках.
Возможно и так, я же говорю не шарю. Но вот допустим плагин jQuery Easy который по идее должен был решить эту проблему, её не решал и помогло лишь изменение кода описанное выше. Главное работает :)
Удалить