Geek asks and answers

Css or javascript scroll transition?

I have two divs with:

width:100%; height:100%

therefore my entire document is 200% high; both divs have a link to each other,

now when I click on the link, I want the site to move smoothly to another div,

I know how this will work in jquery, for example with .scrollto, but my client wants to use wihout applications. Only javascricpt and css!

I tried to achieve it using translateY, but it will not work!

Here is sample code: http://jsfiddle.net/hSU7R/

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>

CSS

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

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

#one {background-color:green}
#two {background-color:red}
+5
source share
2 answers

Is this what you are looking for? Fork of your jsFiddle.

, jQuery? , . , setInterval. , , . , -, , , , , .

jQuery? , , jQuery .

+3

(, , (?)) css.

CSS3 , scroling element. body.

scroll-snap-points, .

CSS, , , .

jsfiddled

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.com/snap-points/1.jpg">
  <img alt="" src="http://treehouse-codepen.s3.amazonaws.com/snap-points/2.jpg">
  <img alt="" src="http://treehouse-codepen.s3.amazonaws.com/snap-points/3.jpg">
  <img alt="" src="http://treehouse-codepen.s3.amazonaws.com/snap-points/4.jpg">
</div>
-1

More articles:


All Articles