javascript - 我的幻灯片到 anchor jQuery 例程是否正确使用了 JavaScript，还是有更好的方法？

Question

我目前正在开发一个单页设计的项目，该项目将在 <a href> 的各部分之间上下滑动。链接...

目前，我的写法如下:

<ul>
    <li><a href="javascript:void(0)" onClick="goToByScroll('top')">home</a></li>
    <li><a href="javascript:void(0)" onClick="goToByScroll('artistsmaterials')">artist's materials</a></li>
    <li><a href="javascript:void(0)" onClick="goToByScroll('pictureframing')">picture framing</a></li>
    <li><a href="javascript:void(0)" onClick="goToByScroll('gallery')">gallery</a></li>
    <li><a href="javascript:void(0)" onClick="goToByScroll('contactus')">contact us</a></li>  
</ul>

...最相关的部分是链接:

<a href="javascript:void(0)" onClick="goToByScroll('contactus')">

然后在 .js 文件中我有:

function goToByScroll(id){
    $('html,body').animate({scrollTop: $("#"+id).offset().top},'slow');
}

这样可以吗？或者应该以不同的方式完成？

Answer 1

在这种情况下，更好的方法是不使用 anchor ，您可以像这样简化标记和代码:

<ul id="scrollMenu">
    <li rel="top">home</li>
    <li rel="artistsmaterials">artist's materials</li>
    <li rel="pictureframing">picture framing</li>
    <li rel="gallery">gallery</li>
    <li rel="contactus">contact us</li>  
</ul>

然后是这个脚本:

$(function() {
  $("#scrollMenu li").click(function() {        
   $('html,body').animate({scrollTop: $("#"+$(this).attr("rel")).offset().top},'slow');
  });
});

这会向您的 <li> 添加一个点击处理程序告诉他们使用rel=""的元素属性来知道滚动到哪里。只需更改 CSS 以指向 <li>元素而不是 <a>一切就绪。