15

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. .

user2907241
  • 265
  • 2
  • 7
  • 15
  • possible duplicate of [html/css buttons that scroll down to different div sections on a webpage](http://stackoverflow.com/questions/16349490/html-css-buttons-that-scroll-down-to-different-div-sections-on-a-webpage) – Vaibhav Mule Jul 22 '15 at 17:33

2 Answers2

15

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.

Charles
  • 4,372
  • 9
  • 41
  • 80
  • 2
    In addition, check out [this link](http://css-tricks.com/snippets/jquery/smooth-scrolling/) to animate the scroll, rather than just jumping the user there instantly – Shai Nov 05 '13 at 19:29
  • Another question here then. How could I make my JS image slideshow start when the user scrolls to it's location? Now it's just running there as soon as the page is loaded. – user2907241 Nov 05 '13 at 19:32
  • You'll want to detect whether the element is visible on the page or not. Check out this question: http://stackoverflow.com/questions/487073/check-if-element-is-visible-after-scrolling – Charles Nov 05 '13 at 19:35
2

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

window.scrollTo(0,document.body.scrollHeight);
Divyesh Kanzariya
  • 3,629
  • 3
  • 43
  • 44