Всем привет Сразу скажу, перебрал уже много страниц, и сам пытался выдернуть ее из кода — все четно. В инете именно кнопки, т.е. не область большая и удобная, а кнопка в которую еле можно попасть. В вконтакте — при прокрутке страницы вниз, на пол экрана с лева появляется область, высотой 100% и шириной где то 100-150 пикселей, которая при нажатии перемещает вверх страницы. Подскажите, как сделать такую кнопку?
Отслеживать
задан 24 окт 2012 в 10:18
636 3 3 золотых знака 28 28 серебряных знаков 50 50 бронзовых знаков
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
Верстате эту кнопку, скрываете. Далее — навешиваете слушателя на scroll, а внутри проверяете scrollTop. И проверяете, больше ли это значение видимой высоты страницы. Если да — значит страница пролистана более чем на 1 видимую область, и тогда стоит показать кнопку. Если нет — соответственно, скрывать кнопку.
На самой кнопке scrollTop(0)
Отслеживать
ответ дан 24 окт 2012 в 10:30
854 5 5 серебряных знаков 14 14 бронзовых знаков
Как сделать кнопку Наверх (Вверх) на сайте, как Вконтакте + плавный скролл. HTML + CSS + jQuery
Не совсем понял вопрос. Если он о том, как сделать саму область, то скорей всего это div с примерно таким набором свойств :
position: absolute; width: 40px; height: 100%; opacity: .6;
Если вопрос о методе, перемещающем вверх странице, то вот :
scrollTo(0,0)
Отслеживать
ответ дан 24 окт 2012 в 10:26
46 2 2 бронзовых знака
вопрос о том, как эту показать, при положении экрана не в верху. т.к. у самого с этим проблемы вышли
24 окт 2012 в 10:47
- jquery
- javascript
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Источник: ru.stackoverflow.com
Как сделать кнопку «Наверх»
Наверняка, Вы часто встречали кнопку «Наверх». Иногда это кнопка, иногда ссылка, это не важно. Например, это кнопка есть вконтакте. И в этой статье я расскажу, как сделать кнопку «наверх».
Кнопка «наверх» позволяет быстро перейти к самому верху страницы. Есть различные способы её реализации, однако, есть, на мой взгляд, самый простой и удобный способ — через использование уникальных идентификаторов.
Давайте сразу приведу код, и Вы всё поймёте:
Соответственно, при клике по ссылке «Наверх» мы попадём на элемент с id=»top», то есть тот самый div. Если его расположить сразу после body, то это и будет самый верх страницы. Как видите, всё очень просто.
Удаление кнопки «Вверх и назад» сбоку вконтакте
Есть ещё один способ, он ещё проще этого, однако, здесь требуется использование JavaScript. Вот код:
Снова при клике мы попадём на самый верх страницы, но здесь уже не нужно добавлять пустые блоки с нужным id. То есть код получается короче, но недостаток — это использование JavaScript.
Классическим и более надёжным является именно первый способ, зато более короткий — второй способ. Какой именно способ использовать для создания кнопки «наверх», выбирать Вам.
Создано 10.02.2012 14:08:02
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
- Кнопка:
Она выглядит вот так: - Текстовая ссылка:
Она выглядит вот так: Как создать свой сайт - BB-код ссылки для форумов (например, можете поставить её в подписи):
Комментарии ( 13 ):
RussianPro 11.02.2012 10:00:13
Admin 11.02.2012 13:33:49
Действительно, можно и так. Не использовал такой способ, но теперь буду знать. Спасибо!
RussianPro 11.02.2012 13:45:36
А как на javascript сделать плавный переход наверх и чтобы при нахождении вверху странички кнопка исчезала?
Admin 11.02.2012 13:46:50
Для этого лучше использовать JQuery. Есть специальные плагины для этого.
sync.o 11.02.2012 14:19:30
Кстати, кнопка «наверх» как правило появляется только если прокрутить окно вниз. А на самом «верху» ее не должно быть видно, логично? Интересно, какое событие отвечает за ее появление?
Admin 11.02.2012 14:38:16
Это событие называется scroll, обработчик onscroll, применяется к body.
sync.o 11.02.2012 22:23:50
А если чуть сложнее: если пользователь прокрутит страничку вниз на заданное число пикселей?
Admin 11.02.2012 22:35:19
sync.o 12.02.2012 13:56:27
Супер! То, что надо, спасибо.
sync.o 13.02.2012 00:07:55
Кстати, на тему скроллинга. Всегда интересно было, как реализовать подгрузку изображений аяксом в момент, когда они попадают во «viewport». Т.е. как заставить картинки грузится лишь тогда, когда юзер прокручивает экран вниз, и они попадают в его поле зрения.
Admin 13.02.2012 00:16:07
Примерно так. Вместо изображений создаются пустые блоки. Затем проверяется, находится ли данный блок в поле видимости окна. Если да, то этот блок заменяется (либо вставляется внутрь) на изображение, опять же через JavaScript (объект Image). При замене на изображение и начнётся его загрузка.
sync.o 13.02.2012 12:20:35
алгоритм ясен. поймать же момент, когда изображение попадает в поле зрения я попытался, проверяя по событию scroll это условие: (document.body.scrollTop + screen.availHeight) > myImage.offsetTop)
mmp261241 18.02.2012 23:34:40
Михаил и Никита, спасибо Вам обоим. Получилось двумя способами с первого раза, а мучилась уже целый год, не знала, как это сделать.
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Источник: myrusakov.ru
Кнопка вверх-вниз как на сайте ВКонтакте
Сколько я потратил времени, чтобы вручную через скрипты подключить такую же как на сайте ВКонтакте (vk.com). Уже потом, спустя несколько дней, нашёл готовое решение – плагин scrollToTop. Он создан для WordPress, но что-то мне подсказывает, что его код можно использовать и на других сайтах.
В блоге кнопка почти невидимая, она находится слева.
Кстати! Справа тоже установил подобную кнопку, но она ведёт вниз до упора (к подвалу / footer) – очень удобно, чтобы не листать вручную, когда нужно перейти на другую страницу.
Источник: asome.ru