I have two divs with:

width:100%; height:100%

so my whole document has an height of 200%; both div`s have an link to each other,

now when i click on the link, i want that the site smoothly slides to the other div,

I know how this would work in jquery , for example with .scrollto, but my client wants an app wihout frameworks. Only javascricpt and css!

I tried to achive it with translateY, but it didnt worked!

Here is an exemplary code: /

The HTML

<div class="full" id="one">
   <span style="width:100%; background-color:blue">
   <a href="#two" >Scroll to 2</a>
   </span>    
</div>


<div class="full" id="two">
    <span style="width:100%; background-color:blue">
    <a href="#one" >Scroll to 1</a></span>
</div>

The CSS

html,body { 
    width:100%;
    height:100%;}

.full {
    height:100%;
    width:100%;}

#one {background-color:green}
#two {background-color:red}

I have two divs with:

width:100%; height:100%

so my whole document has an height of 200%; both div`s have an link to each other,

now when i click on the link, i want that the site smoothly slides to the other div,

I know how this would work in jquery , for example with .scrollto, but my client wants an app wihout frameworks. Only javascricpt and css!

I tried to achive it with translateY, but it didnt worked!

Here is an exemplary code: http://jsfiddle/hSU7R/

The HTML

<div class="full" id="one">
   <span style="width:100%; background-color:blue">
   <a href="#two" >Scroll to 2</a>
   </span>    
</div>


<div class="full" id="two">
    <span style="width:100%; background-color:blue">
    <a href="#one" >Scroll to 1</a></span>
</div>

The CSS

html,body { 
    width:100%;
    height:100%;}

.full {
    height:100%;
    width:100%;}

#one {background-color:green}
#two {background-color:red}

• javascript
• html
• css
• css-transitions

• A basic presentation of the code would be welle into your post too... – Teemu Commented Feb 15, 2013 at 20:11
• 1 This link might help: w3schools./jsref/prop_win_pagexoffset.asp – Aaron Commented Feb 15, 2013 at 20:12
• 1 CSS3 allowed or you need to support IE8 and below? – Fabrício Matté Commented Feb 15, 2013 at 20:13
• 1 @Aaron Please don't link to w3Schools, only what can be adapted there is a bad practice and non-working code : (. – Teemu Commented Feb 15, 2013 at 20:15
• @Teemu jsfiddle/hSU7R is the basic presentation! – Em Sta Commented Feb 15, 2013 at 20:16

2 Answers 2

Is this what you're looking for? A fork of your jsFiddle.

There has to be a smarter way to do this, but that's why we have jQuery right? My basic idea was to grab each anchor and turn off the default click response. Then, replace it with one that starts a setInterval chain. Each time the interval transpires, the window will incrementally scroll based on a frame rate and an estimated total run time. The actual run-time seems to take longer than the input time, but it at least gives you a way to get started.

What is the main disadvantage to using jQuery? I would think you'd get better performance from their implementation, since the jQuery people work on this stuff all the time.

You can control the scroll (speed, direction, position(?)) behavior with css.

CSS3 transitions enables to specify the way an element will go from a state to another while scroling is not an element. But you can position the body.

There is 'scroll-snap-points' wich might relate.

A CSS technique that allows customizable scrolling experiences like pagination of carousels by setting defined snap points.

jsfiddled example

CSS

.gallery {
  font-size: 0;
  margin: auto;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-points-x: repeat(1000px);
  scroll-snap-type: mandatory;
  white-space: nowrap;
  width: 1000px;
}

img {
  width: 100%;
}

HTML

<div class="gallery">
  <img alt="" src="http://treehouse-codepen.s3.amazonaws./snap-points/1.jpg">
  <img alt="" src="http://treehouse-codepen.s3.amazonaws./snap-points/2.jpg">
  <img alt="" src="http://treehouse-codepen.s3.amazonaws./snap-points/3.jpg">
  <img alt="" src="http://treehouse-codepen.s3.amazonaws./snap-points/4.jpg">
</div>