Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make a button scroll down page in HTML?

Couldn't find a tutorial for this anywhere or just didn't use the right keywords. I'm making a one-paged website, and I'd like the navigation bar buttons to scroll the page up/down to the right part. Would this be possible in just HTML and CSS?
I'm not so experienced with JavaScript.

Similar to ''Scroll to the top'' but that I could decide to where it scrolls the page, like middle, top, bottom etc. .

like image 926
user2907241 Avatar asked Nov 05 '13 19:11

user2907241


People also ask

How do you make a scrollable page in HTML?

For vertical scrollable bar use the x and y axis. Set the overflow-x:hidden; and overflow-y:auto; that will automatically hide the horizontal scroll bar and present only vertical scrollbar. Here the scroll div will be vertically scrollable.

How do you make a button that scrolls down the page Elementor?

Go to the “Advanced” tab of scroll down arrow section and open the “Custom Positioning”. In the “Position” option drop-down menu choose “Absolute” value. It will open the horizontal and vertical positioning sliders. Move them and define the place for the scroll down arrow.


2 Answers

Update: There is now a better way to use this, using the HTML id attribute:

Set the destination id: <h1 id="section1">Section 1</h1>

And create a link to that destination using the anchor tag: <a href="#section1">Go to section 1</a>

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.

<a name="section1">Section 1</a>

alongside

<a href="#section1">Go to section 1</a>

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.

like image 111
Charles Avatar answered Oct 11 '22 21:10

Charles


using window.scrollTo you can scroll down your page like this

window.scrollTo(0,document.body.scrollHeight);
like image 30
Divyesh Kanzariya Avatar answered Oct 11 '22 21:10

Divyesh Kanzariya