0

这是我的侧边栏：

<ul id="sidebarupcoming">
<li><a href="#week36">WEEK 36 </a></li>
<li><a href="#week37">WEEK 37 </a></li>
<li><a href="#week38">WEEK 38 </a></li>
</ul>

我试图用这个脚本隐藏它

<!– Scroll –&gt;
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/fgfmpgh/Qqfkzalyi/jquery.scroll.pack.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/fgfmpgh/7xukzalz8/jquery.easing.js"></script>
<script type="text/javascript">
$(function() {
$("#sidebarupcoming").scrollToTop({speed:500,start:700});
});
</script>
<!– / Scroll –&gt;

使用此脚本，“滚动显示”功能可以工作，但是当您单击链接时，“跳转到名称标签”将不起作用，而是页面将跳转到顶部。当我删除脚本时，跳转到名称标签有效，但侧边栏不再隐藏。我怎样才能让它工作？（这个，侧边栏“滚动显示”并跳转到正确的名称标签？）

4

1 回答 1

1

该scroll()方法是 的别名on('scroll', handler)，它是在滚动时触发的事件处理程序，$(window).scrollTop()返回距顶部的距离（以像素为单位）。您喜欢根据需要自定义隐藏动画效果，我推荐.animate(), .hide(), 或.fadeOut()

JavaScript

$(function() {
    $(window).scroll(function(e) {
        if ($(this).scrollTop() > 700)
        {
            $("#sidebarupcoming").fadeIn("slow");
        }
        else
        {
            $("#sidebarupcoming").hide(); 
        }
    });
});

并且单击锚点<a href='#week36'>WEEk 36 </a>应该可以按预期工作，如果您希望为该元素设置滚动动作动画，您应该查看此 SO Answer。

在这种情况下，我建议为每个链接添加一个类，animated-scroll如下所示：

JavaScript

$(".animated-scroll").click(function (e){
    var elementID = $(this).attr('href');
    e.preventDefault(); // stop default behaviour
    $('html, body').animate({
        scrollTop: $(elementID).offset().top
    }, 2000);
});

HTML

<ul id="sidebarupcoming">
  <li><a href="#week36" class='animated-scroll'>WEEK 36 </a></li>
  <li><a href="#week37" class='animated-scroll'>WEEK 37 </a></li>
  <li><a href="#week38" class='animated-scroll'>WEEK 38 </a></li>
</ul>

学分：

检查 jquery 文档

于 2013-08-29T11:30:24.170 回答