-1

I've written i snippet of code here to demonstrate more clearly: https://jsfiddle.net/u73r6ypp/

<div id="header">Fade me away</div>
<div id="p">Lorem ipsum dolor sit amet...</div>

What I want is, as u scroll the page down, the header div will fade out, but at a point, for instance last 20% of the header element the page will scroll itself (animate/transition) to the next element which will come from the top of the window.

I hope you do understand my request and thank you in advance.

Amir Rami
  • 13
  • 3

2 Answers2

2

JQuery has support for this using the animate function.

$('html, body').animate({
    scrollTop: $("#elementtoscrolltoo").offset().top
}, 1000);

This will scroll the page down to the element you specify in 1 second (1000 milliseconds).

JordanOcokoljic
  • 357
  • 2
  • 14
  • Thanks buddy, but how would you set the condition from where to animate the page? – Amir Rami Jun 10 '17 at 02:30
  • @AmirRami use the `scroll()` event to watch for scrolling, and then use the `scrollTop()` to get how get how many pixels down the element you are and compare that to the height of the page. When the condition is met, trigger this code. See [this question](https://stackoverflow.com/questions/4957658/trigger-jquery-function-when-passed-half-way-down-the-page) for a more whole answer. – JordanOcokoljic Jun 10 '17 at 02:32
0

Don't know about jquery but there's a far easier method using JavaScript. Simply type in:

function scrollSample() {
window.scrollTo (x,y);
}

Then call the function in html. That should scroll you to the desired point if you replace x and y with the values you want.

Rohan Shetty
  • 162
  • 1
  • 13