Reduce flickering using scrolltop and add fade in/out on scroll - scroll

Question

I have added this scroll feature with no plugins to scroll up and down a gallery of large images on a single page. My code is not very elegant but the scroll basically repeats itself from image to image on action of click on arrows.
<script>
$(document).ready(function (){
$("#click4").click(function (){
$('html, body').animate({
scrollTop: $("#image2").offset().top
}, 600);
});
});
</script>
<script>
$(document).ready(function (){
$("#click5").click(function (){
$('html, body').animate({
scrollTop: $("#image4").offset().top
}, 600);
});
});
</script>
<div id="top">
<class id="image3"><img src="images/blank.png" alt=""/></class></div>
<div id="gallery">
<img src="images/image3.jpg" alt=""/>
</div>
<div id="title">
Untitled<br>2013<br>size<br>Archival pigment print<br>
Edition of <br></div>
<div id="arrows">
<class id="click4"> <span class="arrow-n"></span> </class>
</div>
<div id="arrows">
<class id="click5"> <span class="arrow-s"></span> </class>
</div>
<script>
$(document).ready(function (){
$("#click6").click(function (){
$('html, body').animate({
scrollTop: $("#image3").offset().top
}, 800);
});
});
</script>
<script>
$(document).ready(function (){
$("#click7").click(function (){
$('html, body').animate({
scrollTop: $("#image5").offset().top
}, 800);
});
});
</script>
<div id="top">
<class id="image4"><img src="images/blank.png" alt=""/></class> </div>
<div id="gallery">
<img src="images/image4.jpg" alt=""/>
</div>
<div id="title">
Untitled<br>2013<br>size<br>Archival pigment print<br>
Edition of <br></div>
<div id="arrows">
<class id="click6"> <span class="arrow-n"></span> </class>
</div>
<div id="arrows">
<class id="click7"> <span class="arrow-s"></span> </class>
</div>
The problem I am having is the images seem to flicker as you move up and down. Two questions.
Is there a simple way to avoid flickering with large images when scrolling.
Can I add a fade in fade out as you scroll into each image and how do I add this to the script. I think this will reduce the amount of flickering and add a nice effect.
Thanks for any advice.

Answer 1

Ive taken a look at what you have posted but I'm not able to get your code working as-is.
firstly, you should try to combine your scripts into 1. for example, you have a function for each click to scroll to 1 image. What you should do is create just 1 function then have that check the image to scroll to. There are many ways that you can do this but here is an example:
$(".clk").click(function () {
var $this = $(this),
img = $this.data('img');
$('html, body').animate({
scrollTop: $("#"+img).offset().top
}, 600);
});
Along with this function, you would need to change your markup like this:
<div id="Div6">
<div id="click7" data-img="image5" class="clk"> <span class="arrow-s"></span>
</div>
</div>
so, I have added a class of clk, this is what is going to call the function now, not clicking on the ID so that we can add this class to as many images as we want. Next, in your functions you are scrolling to the top of an image which is hard coded into each ID function... I have added an HTML Data attribute "data-" and have called it img ("data-img"). So now, when you click on class, you will call the function which will read the attribute and know where to scroll to.
Once you have got this working, please create a jsFiddle (jsfiddle.net) where you paste your html, jquery and css into the boxes and you can run the code there. Then save it and post the link back here for me so that I can see a working version and I'll take another look for you. ;-)