Question

我已经在我的图片上滚动到底部链接。这是一个箭头指向下方的图像。当您第一次访问网站时，箭头的图像位于页面底部朝下，单击它时会滚动到底部并最终显示在页面顶部。当箭头图像在页面顶部变成指向上方的箭头图像时，我可以实现吗？

我已经使用此代码来实现向下滚动的图像和功能。

html的

<div class="arrow"><a href="#" class="scroll-down" address="true">
<img src="https://blog.com/hubfs/Icon/arrow.png"> 
</a></div>

假设将其替换为src =“https://blog.com/hubfs/Icon/arrowup.png”＆gt;并且在图像更改时添加功能以单击它并滚动到顶部

的.js

 $(function() {
    $('.scroll-down').click (function() {
      $('html, body').animate({scrollTop: $('div.me').offset().top }, 'fast');
      return false;
    });
});

Answer 1

    $(function () {
        var clickedImg = false;
        var imageElement = $('#img_button');

        $('.scroll-down').click(function () {
            $("html, body").animate({ scrollTop: 0 }, 600);
            clickedImg = !clickedImg;
            if (clickedImg) {
                imageElement.attr("src", 'arrow_down.png');
            } else {
                imageElement.attr("src", 'arrow_up.png');
            }
            return false;
        });
    });

使用变量clickedImg，我们知道何时单击图像。如果单击它，则箭头向下，如果没有，则箭头向上（在我的示例中）。

这样：clickedImg = ! clickedImg;我们正在切换变量的值。

编辑1： 我编辑了上面的代码，使其完整jQuery。

编辑2： 这是一个plunkr

编辑3： 我相信你的代码部分不起作用：

$('html, body').animate({scrollTop: $('div.me').offset().top}, 'fast');

因为$('div.me')是undefined。确保该元素存在。如果您对此行发表评论，则代码可以正常运行修复动画，然后你就可以了。如果它更容易让你使用我的plunkr。 ;）

单击后如何更改图像？

1 个答案: