使用scrolltop减少闪烁，并在scroll上添加淡入/淡出

我添加了这个滚动功能，没有插件可以在一个页面上上上下滚动一个大型图像库。我的代码不是很优雅，但滚动基本上是在点击箭头的动作下从一个图像到另一个图像重复自己

    <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>

$（文档）.ready（函数（）{
$（“#单击4”）。单击（函数（）{
$（'html，body'）。设置动画({
滚动顶部：$（“#图像2”）.offset（）.top
}, 600);
});
});
$（文档）.ready（函数（）{
$（“#单击5”）。单击（函数（）{
$（'html，body'）。设置动画({
scrollTop:$（“#image4”）.offset（）.top
}, 600);
});
});
无标题
2013
大小
档案颜料印刷



$（文档）.ready（函数（）{
$（“#单击6”）。单击（函数（）{
$（'html，body'）。设置动画({
滚动顶部：$（“#图像3”）.offset（）.top
}, 800);
});
});
$（文档）.ready（函数（）{
$（“#单击7”）。单击（函数（）{
$（'html，body'）。设置动画({
滚动顶部：$（“#图像5”）.offset（）.top
}, 800);
});
});
无标题
2013
大小
档案颜料印刷

我遇到的问题是，当你上下移动时，图像似乎会闪烁。两个问题

有没有一种简单的方法可以避免在滚动时大图像闪烁

我可以在滚动到每个图像时添加淡入淡出，以及如何将其添加到脚本中。我认为这将减少闪烁的数量，并添加一个很好的效果。 谢谢你的建议

---

我看了一下你发布的内容，但我无法让你的代码正常工作。 首先，您应该尝试将脚本合并为1。例如，您有一个功能用于每次单击滚动到一个图像。您应该做的是只创建一个函数，然后让它检查要滚动到的图像。有很多方法可以做到这一点，但下面是一个例子：

$(".clk").click(function () {
    var $this = $(this),
        img = $this.data('img');

    $('html, body').animate({
        scrollTop: $("#"+img).offset().top
    }, 600);
});

除此功能外，您还需要更改标记，如下所示：

<div id="Div6">
    <div id="click7" data-img="image5" class="clk"> <span class="arrow-s"></span> 
    </div>
</div>

因此，我添加了一个clk类，这就是现在要调用的函数，而不是单击ID，这样我们就可以将这个类添加到我们想要的任意多个图像中。接下来，在您的函数中，您将滚动到硬编码到每个ID函数中的图像顶部。。。我添加了一个HTML数据属性“Data-”，并将其命名为img（“dataimg”）。现在，当您单击类时，您将调用函数，该函数将读取属性并知道滚动到哪里

---

一旦你完成了这项工作，请创建一个jsFiddle（jsFiddle.net），在这里你可以将你的html、jquery和css粘贴到框中，然后你可以在那里运行代码。然后保存它，并为我将链接张贴回这里，以便我可以看到一个工作版本，我将为您再看一眼。；-）

一,。顶部和底部是否有任何边距，有时会因顶部和底部边距冲突而导致闪烁。。2.你能发布更多的代码吗？或者你的一个页面的中间部分，这样我们就可以看到你想要实现的目标了。顶部和底部都没有边距，但我确实在图像div周围有边距。我将修补这些。谢谢，我已经补充了更多。非常简单的重复动作的滚动效果时，点击箭头。谢谢，会按照你的建议，并返回给你。