html - 使用图像作为可点击的 anchor 链接

Question

我有一个由几张图片组成的 sidenav。我希望这些图像链接到同一页面上的部分 - anchor 链接。但是，我似乎无法让它工作。

这是我的 HTML:

<div id="nav2"><a href="#powerlifting"><img src="img/icon1.png" alt=""></a></div>

<a name="powerlifting"></a>
<div id="powerlifting">
    <div class="header1"><h1>POWERLIFTING</h1></div>
</div>

这是#nav2 上的样式:

#nav2 {
    position: fixed;
    top: 14.285vh;
    cursor: pointer;
}

提前致谢! :-)

Answer 1

上面的代码似乎有效。带有 #powerlifting 的 href 的 anchor 标记实际上跳转到了 div#powerlifting。您可能看不到它，因为您的 div 可能不够高。

但是，如果您希望它通过动画向下滚动，则需要使用 JS 或 CSS。

这可能是一个相关的答案:Scrolling to an Anchor using Transition/CSS3 .随附的 JS Fiddle(来自相关答案)可能对您有所帮助:http://jsfiddle.net/YYPKM/3/