Vertical scroll Page to next image on click

Question

I hope someone can help me with this problem. I would be very grateful! I've searched the Forum but i couldn't find the right way to get it working.

I'm searching for a solution to cycle vertically trough images like this example here:

http://www.mirkoborsche.com/2013-Superpaper-No43

The structure of my site looks like this:

<div class="img-cont">

<img alt="image-1.jpg" src="uploads/image-1.jpg" class="progressive" />
<img alt="image-2.jpg" src="uploads/image-2.jpg" class="progressive" />
<img alt="image-3.jpg" src="uploads/image-3.jpg" class="progressive" />
<img alt="image-4.jpg" src="uploads/image-4.jpg" class="progressive" />

</div>

Many thanks in advance! Cheers

score 1 · Answer 1 · answered Jun 12 '13 at 09:29

1

if you are using jQuery you can animate scrollTop. Here's an example. http://papermashup.com/jquery-page-scrolling/

answered Jun 12 '13 at 09:29

yardarrat

280
3
14

Hello! Thank you for the Link. Thats nearly what i'm searching for ... but i need a method to scroll up and down the page without giving each image a class. – Roman Burger Jun 12 '13 at 13:06
just specify the amount then: `scrollTop: "+=200px"`. – yardarrat Jun 12 '13 at 13:26
also something like `scrollTop: $(".images").eq(counter).offset().top` with a `counter++` could work for you – yardarrat Jun 12 '13 at 13:30

score 0 · Answer 2 · edited May 23 '17 at 10:25

0

Wrap each of the images in an anchor tag <a> and use javascript like this:

function scrollTo(hash) {
    location.hash = "#" + hash;
}

Then you can call this function with an onClick() on something or with a button, for instance.

EDIT:

If you need an easing effect to transition smoothly, check out this answer here in SO.

edited May 23 '17 at 10:25

Community

1
1

answered Jun 12 '13 at 09:28

Joum

3,189
3
33
64

well from the example he gave i'm guessing he wants a smooth scroll. `location.hash` is jumpy – yardarrat Jun 12 '13 at 09:54
Unfortunately I wasn't able to check out the example... It's blocked with my firewall at work. I'll update the answer... – Joum Jun 12 '13 at 11:29

Vertical scroll Page to next image on click

2 Answers2