1

我正在设计的页面底部有一个固定位置栏，用于参考，它从页面加载开始，高度为零，但可以通过单击直接位于其顶部的 div 来展开。同样，各个引用是内容块中链接的锚点，我正在使用 scrollTo 和 localScroll jQuery 插件进行导航 - 如果在展开引用栏时单击锚定链接，它将 localScroll 到它，如果栏缩小，它会滚动到它，然后调用展开动画。处理所有这些的脚本的第一部分效果很好 - 单击定位的 div 时参考栏打开就好了 - 但是页面加载后单击的第一个锚定链接，无论参考栏是关闭还是打开，都需要单击两次，没有之一，做任何事。这是脚本：

$(document).ready(function() {
    $("#reftag").css('bottom', '0px');
    $("#refblock").css('height','opx');
    $("refblock").scrollTo($("#refblock h4"),0);


    $("#reftag").click(
        function(){
            var offset = $("#refblock").offset();
            if(($(document).scrollTop()+$(window).height() - offset.top) > 100)
            {
                $("#reftag").animate({bottom: "0px"}, {queue:false, duration: 1700, easing: 'easeOutBounce'})
                $("#refblock").animate({height:"0px"},{queue:false, duration: 1700, easing: 'easeOutBounce'})
                $("#refblock").scrollTo($("#refblock h4"),0);
            }
            else
            {
                $("#reftag").animate({bottom: "200px"}, {queue:false, duration: 1700, easing: 'easeOutBounce'})
                $("#refblock").animate({height:"200px"},{queue:false, duration: 1700, easing: 'easeOutBounce'})
            }
            return false;
        });

    $("a.ref").click(
        function () {           
            var offset = $("#refblock").offset();
            if(($(document).scrollTop()+$(window).height() - offset.top) > 100)
            {
                $('#textblock').localScroll({target:'#refblock'});
            }
        else{
            $('#textblock').localScroll({target:'#refblock',onAfter:function(){
                $("#reftag").animate({bottom: "200px"}, {queue:false, duration: 1700, easing: 'easeOutBounce'})
                $("#refblock").animate({height:"200px"}, {queue:false, duration: 1700, easing: 'easeOutBounce'})
            }});    
            }
                return false;
        });
    });

这是 refblock 的 CSS（以防它具有任何值）：

#refblock{
    width: 100%;
    height: 0px;
    position: fixed;
    bottom: 0px;
    padding: 3px 20px 3px 0px;
    background: rgb(194,1,92);
    margin-left: 0%;
    margin-right: auto;
    text-align:center;
    z-index: 100;
    overflow: auto;
}

有任何想法吗？是剧本的问题，还是别的什么？我会在网站上线时发布一个链接，如果还有其他对答案有用的东西，请告诉我。

4

1 回答 1

0

尽量防止点击a.ref链接触发的默认操作：

$("a.ref").click(function (e) {
   e.preventDefault(); 
}
于 2012-07-14T17:09:53.413 回答