0

I need go go to the next or previous image using the side navigation (up/down arrows) I have created. The images are vertically stacked. How do I go about doing this? Code pen demo at the bottom.

HTML:

<div class="container">
    <div class="col-md-12">
        <h1 class="text-center">Title goes here</h1>
        <img width="100%" class="img-responsive" src="https://placeimg.com/1000/500/arch" alt="" />

        <img width="100%" class="img-responsive" src="https://placeimg.com/1000/500/arch" alt="" />

        <img width="100%" class="img-responsive" src="https://placeimg.com/1000/500/arch" alt="" />

        <img width="100%" class="img-responsive" src="https://placeimg.com/1000/500/arch" alt="" />

        <div class="project-side-bar">
            <a href="#" class="up-arrow"><i class="fa fa-arrow-up"></i></a>
            <a href="#" class="down-arrow"><i class="fa fa-arrow-down"></i></a>
            <div class="info"><a href="#info">info</a></div>
        </div>

        <div id="info">
            <h2>Info down here</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> 

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>    
        </div>

    </div>

</div>

JS: - I believe I start off like this?

$('img').each(function(i, el) {
        imageArray.push(this.offsetTop);
});

CODEPEN DEMO

ifusion
  • 2,163
  • 6
  • 24
  • 44
  • I think this question has already been answered here: http://stackoverflow.com/questions/8579643/simple-jquery-scroll-to-anchor-up-or-down-the-page – KTHero Aug 19 '15 at 22:31
  • possible duplicate of [Javascript scroll to element with animation onclick](http://stackoverflow.com/questions/27554831/javascript-scroll-to-element-with-animation-onclick) – Dave Aug 19 '15 at 22:52
  • Haven't been able to get it to go using those methods. I have tried implementing this version, but for click events but its not working either: http://stackoverflow.com/questions/15690892/jump-to-next-prev-image-vertical-scroll-with-jquery – ifusion Aug 20 '15 at 01:39

0 Answers0