Как сделать прокрутку страницы в html

Атрибут scrolling

Если содержимое фрейма не помещается в отведенные размеры, автоматически появляются полосы прокрутки для просмотра информации. В некоторых случаях, полосы прокрутки нарушают дизайн веб-страницы, поэтому от них можно отказаться. Для управления отображением полос прокрутки используется атрибут scrolling .

Синтаксис

Значения

auto Полосы прокрутки добавляются браузером только по необходимости, в том случае, когда содержимое фрейма превышает его видимую часть. no Запрещает отображение полос прокрутки. yes Всегда вызывает появление полос прокрутки, независимо от объема информации.

Значение по умолчанию

HTML 4.01 IE Cr Op Sa Fx

Прокрутка страницы к нижнему краю элемента

В основном все решения для прокручивания страницы к нужному элементу сводятся к переходу на его верх. Тоже самое делают и якоря в html.

В данной теме рассмотрен переход страницы в низ этого элемента.

Пример:

• Низ секции 1
• Низ секции 2
• Низ секции с картинкой

HTML:

Где атрибут data-to указывает ID элемента, к низу которого нужно прокрутить страницу.

JS:

window . onload = function ( ) < let nav = document . querySelectorAll ( ".toBottom" ) ; for ( let i = 0 ; i < nav . length ; i ++ ) < nav [ i ] . onclick = function ( ) < let where = document . getElementById ( nav [ i ] . getAttribute ( "data-to" ) ) ;

window . scrollBy ( 0 , where . getBoundingClientRect ( ) . top — document . documentElement . clientHeight + where . offsetHeight ) ;

Для плавной прокрутки можно добавить CSS-свойство scroll-behavior :

scroll-behavior : smooth ;
Секция с картинкой

• Низ секции 1
• Низ секции 2
• Низ секции с картинкой

Нравится 7
В закладки

• Опубликовано: 29.10.2021 / Обновлено: 18.11.2021
• Рубрики: Прокрутка и скроллбары
• Метки: JavaScript, Авторское
• 4358 просмотров

Смотрите также:

Навигационное меню для лендинга

Навигационное меню для лендинга с плавным скроллом и подсветкой пункта активной секции

Фиксация сайдбара при прокрутке вверх и вниз

Плагин Theia Sticky Sidebar для фиксации боковой колонки при прокрутке страницы

Перелистывание изображений при скроллинге

Красивый эффект смены изображений колесом прокрутки мыши на WebGL

Добавить комментарий:

Ваш комментарий отправлен!

Комментарии:

Миша: 03.11.2021 в 17:48
Прикольное решение. Спасибо ��
Тимофей: 29.10.2021 в 16:05
Это же обычные якорные ссылки,а почему название страницы прокрутка?
Alexander: 29.10.2021 в 18:13

Якоря — на верх элемента.
У нас есть секции А Б В, и перейдя по якорю, мы попадем на верх этих секций.
Другими словами они равняются по верхней границе окна браузера.
А тут по нижнему. Меня вчера попросили сделать, стало интересно, а как.
Решение редко применяемое, конечно, но кому то же понадобилось �� А прокрутка. страницу прокручиваем в нужную точку. Не так?

• Создание и оформление сайтов
  • Тексты, ссылки и кнопки
  • Вкладки, блоки и списки
  • Секции
  • Меню и аккордеоны
  • Модальные окна
  • Слайдеры и карусели
  • Формы
  • Фото, аудио и видео
  • Фоны и паттерны
  • Картинки и иконки
  • Карты и геолокация
  • Прокрутка и скроллбары
  • Весь сайт
  • HostCMS
  • WordPress
  • Фоновые анимации на JS

  Фоновая анимация на JS

  

  Простые решения:

  • Текст с исчезающими буквами
  • Стрелки вниз для полноэкранных слайдеров
  • Имитация набора текста с переливающимся эффектом
  • Адаптивное видео шириной 100%
  • Бегущие волнистые линии
  • Переливающийся текст на CSS

  Как сделать прокрутку страницы в html

  Разрешить или запретить прокрутку страницы можно сделать с помощью элемента div и свойства overflow в CSS.

  Например, создадим блок с классом scroll и применим к нему свойство overflow-y: scroll; :

   class="scroll"> 

  .scroll  height: 200px; /* Высота блока */ overflow-y: scroll; /* Включаем вертикальную прокрутку */ > 

  Теперь, если содержимое блока scroll превысит высоту блока, то появится полоса прокрутки, с помощью которой можно будет прокручивать содержимое.

  Кнопка для прокрутка страницы вверх

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

  Вы получите в правом нижнем углу кнопку следующего вида:

  Давайте сделаем её немножко симпатичнее, добавив стили:

  Получится вот такая кнопочка:

  Прокрутка вверх на HTML + CSS + JavaScript

  Если нет возможности поставить анкор у одного из верхних элементов, можно использовать следующий код для прокрутки окна в начало страницы:

  Наверх

  Если Вы хотите сделать медленную прокрутку страницы вверх, придется немножно поколдовать:

  Результат Вы видите на странице справа внизу

  Анимированная прокрутка вверх на jQuery

  Для тех, кто жить не может без jQuery, привожу наиболее простой и популярный на просторах интернета код:

  Похожие публикации:

  1. Как поставить текстуру на террейн в unity
  2. Как скачать дискорд на кали линукс
  3. Как установить nasm в ubuntu
  4. На какой язык похож