Scroll page down while button clicked in html

You don’t have to wrap superfluous anchor tags around destination links anymore! If you are asking about navigating to a new page and automatically having it scroll to the right section, you can do something like: and the link will automatically open to that section of the page.

Onclick open page and scroll down

This is the command you can use to scroll down:

window.scrollTo(0,document.body.scrollHeight); 

Now if you want to go directly to the bottom you can put this do that while the page are loaded:

Here is an example of what you are asking about:

   clicked() Click Me Your content.   

When you click the button, it should scroll down to the div.

If you are asking about navigating to a new page and automatically having it scroll to the right section, you can do something like:

and the link will automatically open to that section of the page.

How to scroll to top when a button is clicked?, Try this code: $(«#button»).on(«click», function() < $("body").scrollTop(0); >);. Method on binds a click event to the button and scrollTop

CSS Scroll Down Animated Button

This is the day-17 of #30days30submits. Today we are going to create a animated CSS scroll Duration: 13:31

Create a «Scroll To Top» Button with HTML, CSS & JavaScript

In this video we’re going to create a «Scroll To Top» button using plain HTML, CSS and Duration: 11:00

How to make HTML page scroll all the way up when clicking a button? [duplicate]

$("#scrollup").click(function() < $("html, body").animate(< scrollTop: 0 >, "slow"); return false; >);

 * < margin: 0; padding: 0; box-sizing: border-box; >html, body < height: 100%; >.container < border: 1px solid orange; >.big_div < border: 1px solid black; height: 1200px; >#scrollup

Scroll to a specific Element Using html, It is true that adding the scroll-behavior: smooth to the html element allows smooth scrolling for the whole page. However not all web browsers

Implement scroll down — scroll up buttons by holding down click on them

You need to addEventListener to both mouse down and up. Then have a interval timer when the mouse is down and not released. And, clear the interval if mouse released.

I added a pos html element to show which image is clicked and held (Since I don’t have all your HTML and CSS code), but you can modify the window.scrollBy method to have it scroll the page.

var pos = document.getElementById("pos"); var number = pos.innerHTML; var timeOut = 0; var scrollFun = function(e) < if (e.type == "mousedown") < timeOut = setInterval(function() < if (e.target.id == "btn-scroll-up") number -= 100; else number += 100 pos.innerHTML = number; window.scrollBy(0, -100); >, 100); > if (e.type == "mouseup") < clearInterval(timeOut); >>; document.getElementById("btn-scroll-down").addEventListener("mousedown", scrollFun, false) document.getElementById("btn-scroll-down").addEventListener("mouseup", scrollFun, false) document.getElementById("btn-scroll-up").addEventListener("mousedown", scrollFun, false) document.getElementById("btn-scroll-up").addEventListener("mouseup", scrollFun, false)

Window.scroll(), 3 days ago · y-coord is the pixel along the vertical axis of the document that you want displayed in the upper left. - or -. options. A dictionary containing
How to make a button scroll down page in HTML?
 Update: There is now a better way to use this, using the HTML id attribute:
Set the destination id: 

The benefit of this new method is that the id attribute can be set on any HTML element. You don't have to wrap superfluous anchor tags around destination links anymore!
 Original answer: 
You can look at using the HTML anchor tag.
When the user clicks on "Go to section 1", they will be sent to the section of the page where the "Section 1" text is displayed.
using window.scrollTo you can scroll down your page like this
window.scrollTo(0,document.body.scrollHeight); 
How can I scroll down 50px after clicking a button?, Try this, window.scrollTo(window.scrollX, window.scrollY + 50);.
Источник
Способы добавления плавной прокрутки страницы в CSS и JavaScript
Наверняка вы посещали страницы, которые плавно прокручивают контент при клике на ссылке к соответствующему блоку. Это красиво выглядит на лэндингах (LandingPage, или посадочная страница), в которых пространство страницы разбито на части, или в больших статьях с содержанием. Такая прокрутка называется скроллингом (от англ. scroll).
Однако, это не только красиво, но и достаточно просто с точки зрения реализации.
Прокрутка страницы с помощью CSS
Для того чтобы плавная прокрутка происходила на всей странице, необходимо добавить свойство scroll-behavior: smooth для селектора html .
Если плавная прокрутка необходима в пределах какого-то контейнера, то это свойство назначают для него.
По умолчанию свойство scroll-behavior имеет значение auto , т.е. прокрутка будет обычной, без эффекта плавности. 
Посмотрите пример, основанный на css-свойстве (открыть в новой вкладке):
Примечание: в каждом примере есть 5 ссылок вверху для прокрутки к блокам текста и ссылка со стрелкой в правом нижнем углу для возврата наверх страницы. Используйте их для тестов свойств и методов для плавного скроллинга страницы.
Ложкой дегтя для этого свойства будет неполная поддержка его браузерами. Вы можете посмотреть, какова она на скриншоте и на caniuse.com.

Поддержка свойства scroll-behavor браузерами
Поэтому рассмотрим, как сделать плавную прокрутку с помощью jQuery и JavaScript.
Скроллинг с помощью jQuery
Понятно, что для использования jQuery вам нужно будет сначала подключить эту библиотеку. Дальше нужно будет отслеживать клики по ссылкам, у которых есть хэш ( # ) и анимировать свойство scrollTop для селектора $('html, body') .
Это решение является кроссбраузерным, хотя у него есть один недостаток - если на вашем сайте jQuery не используется для работы с другими объектами/плагинами, то подключать лишние 88кб или порядка 40кб в gzip-сжатом виде не очень интересно ради 10-15 строк кода. 
Пример (открыть в новой вкладке):
Плавная прокрутка на JavaScript
Здесь тоже есть 3 решения, каждое из которых использует свой подход к созданию плавности прокрутки с помощью разных JS-методов.
Решение 1. Метод scrollIntoView()
Из документации на MDN узнаем, что

Метод Element.scrollIntoView() прокручивает текущий контейнер родителя элемента, так, чтобы этот элемент, на котором был вызван scrollIntoView() был видим пользователю.

Этот метод имеет параметры, подобные css-свойству scroll-behavior: smooth для прокрутки контента к элементу с нужным id, указанным в виде хэш в ссылке.
const links = document . querySelectorAll ( 'a[href^="#"]' ) ; // все ссылки, с атрибутом href, начинающимся с "#"
К сожалению, и тут не обошлось без "ложки дегтя" в виде поддержки браузеров. Давайте обратимся к caniuse.com и увидим такую картину:

Поддержка свойства scrollIntoView браузерами
К сожалению, нужное нам значение свойства behavior: 'smooth' поддерживается не всеми браузерами.
Кроме того, если верхняя панель навигации у нас зафиксирована, т.е. имеет свойство position: fixed , то нужно будет добавить к прокрутке смещение на ее высоту.
Пример прокрутки контента с помощью метода scrollIntoView() (открыть в новой вкладке)).
Решение 2. Используем window.scrollBy() для плавной прокрутки.
Тут все методы и свойства и имеют хорошую поддержку браузерами.
let links = document . querySelectorAll ( 'a[href^="#"]' ) , // все ссылки, с атрибутом href, начинающимся с "#"
header = document . querySelector ( 'header' ) , //элемент header, который может быть спозиционирован абслютно или фиксированно
Код JavaScript предполагает, что на вашей странице нет абсолютно позиционированной или фиксированной шапки сайта (элемент ), в котором чаще всего размещаются ссылки-якоря на разделы страницы, поэтому переменная offsetTop (смещение сверху) сначала задана как 0.
Если же шапка сайта, например фиксирована (для этого в примере есть переключатель), то отступ сверху нужен и для (задается в классе .for-fixed ), и для всех тех блоков, на которые указывают ссылки. Поэтому в переменную offsetTop мы записываем расчетную высоту . 
Пример прокрутки контента с помощью window.scrollBy() (открыть в новой вкладке)).
Решение 3. Использование методов requestAnimationFrame() и window.scrollTo() для плавной прокрутки
Метод window.requestAnimationFrame() позволяет выполнить анимацию, используя в качестве параметра функцию, которая будет вызвана перед перерисовкой экрана в браузере. В примере функция имеет имя step и плавно прокручивает окно браузера к соответствующему блоку с помощью метода window.scrollTo() в зависимости от параметра velocity , который задан, как .8 .
Источник
Scroll Down Button | HTML & CSS Tutorial

Hey everyone. Welcome to Coding Artist. Today we will learn how to create a scroll down button. To create this button we need only HTML and CSS.
The scroll down button consists of an animation that indicates the user to scroll down to a new section. Clicking on the button takes the user to the next section of the page. This is not limited only to the section. This button can be used to scroll to any section of the page.
We usually use the scroll down button on hero sections. But we can use it on any section of our page. Also, If you are looking for a tutorial on the scroll to top button, you can check out this tutorial here.
Video Tutorial:
If you prefer to learn by watching a video tutorial, you should check out the video version of this tutorial here. And do subscribe to my youtube channel where I post web development related tips, tricks and tutorials.

Project Folder Structure:
Before we even start coding, we need to create a project folder structure. To do that we create a folder called ‘Scroll Down Button’. Within this folder, we have two files. The first file is the HTML document. We name this file index.html. The next one is the stylesheet which we name style.css. We can now begin to code.
HTML:
The HTML section consists of two section elements. We assign each of them a unique id. The first section consists of an anchor tag. The ‘href’ attribute of this is set to the id of section-2. Also, we assign ‘scroll-btn’ id to the anchor tag.
The text/content of section-2 is just for demo purposes. You can use any kind of element in this section.
          
HELLO THERE
 
WELCOME TO CODING ARTIST
 
   
CSS:
Now let us style our sections and button using CSS. Do copy the code below and paste it into your stylesheet.
We don’t have to do much in CSS since we have already added the functionality using HTML. We start by discarding the margins and paddings of all the elements.
Next, we set the scroll behaviour of the document to smooth. Please note that this is a crucial step. Without this, there would be no transition to the next section.We use the anchor tag along with its before pseudo-element to create the scroll down shape. And to add the animation we use the animation property along with keyframes.
We use the after pseudo-element of the anchor tag to insert the ‘Scroll Down’ text.
To make this code responsive we use media queries with its breakpoint set at a max-width of 500px.
* < padding: 0; margin: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; >html < scroll-behavior: smooth; >section < height: 100vh; position: relative; >#section-1 < background-color: #2d8df8; >a#scroll-btn < position: absolute; height: 10em; width: 6.25em; border: 0.5em solid #ffffff; margin: auto; left: 0; right: 0; bottom: 6.25em; border-radius: 3em; >a#scroll-btn:before < position: absolute; content: ""; margin: auto; left: 0; right: 0; top: 1.2em; height: 1.2em; width: 1.2em; background-color: #ffffff; border-radius: 50%; animation: move-down 2s infinite; >@keyframes move-down < 80% < opacity: 0.5; >100% < transform: translateY(5.3em); opacity: 0; >> a#scroll-btn:after < position: absolute; content: "SCROLL DOWN"; width: 12em; display: block; width: 12em; text-align: center; left: -4.2em; bottom: -2.5em; font-size: 1.6em; color: #ffffff; letter-spacing: 3px; font-weight: 600; >#section-2 < background-color: #111315; color: #ffffff; font-size: 2.7em; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1em; >@media screen and (max-width: 500px) < a#scroll-btn < font-size: 12px; >>
We have successfully built the scroll down button. If you have any issues while creating this code you can download the source code by clicking on the download button below. Also, I would like to hear from you. If you have any queries, suggestions or feedback then comment them below.
Happy Coding!
Источник
Читайте также:  Html тег body назначение