Question

下面的代码为我的同页锚链接<a href="#contact">Contact</a>设置了动画，但如果我将它与图像<a href="#to-top"><img src="images/logo.png"></a>结合使用，则动画不起作用。使用图像，单击将带您到目的地，但没有动画。

目的地的格式如下：<div id="contact">...</div>。

任何想法我做错了什么？

$('a').click(function(){ // I tried changing the 'a' to 'img', to no avail...
    var topoffset = 68;
    $('html, body').animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top-topoffset+2
    }, 800);
    return false;
});

Answer 1

但如果我将动画与图像合并，则动画无法正常工作。用图像，点击一下将带您到目的地，但没有动画。

出现在stacksnippets执行动画效果？

＆＃13;

$('a').click(function(){ // I tried changing the 'a' to 'img', to no avail...
    var topoffset = 68;
    $('html, body').animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top-topoffset+2
    }, 800);
    return false;
});

＆＃13;

#contact {
  position:relative;
  top:200px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a title="click" href="#contact"><img src="http://lorempixel.com/50/50/technics/" /></a>
<div id="contact">...</div>

＆＃13;

Answer 2

我想出来了。我将脚本移动到页面底部，问题自行解决。

使用带有标签的图像锚定标签滚动动画

2 个答案: