Question

我正在设计的页面底部有一个固定的位置栏，用于引用，从页面加载开始，高度为零，但可以通过单击直接位于其顶部的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;
}

有什么想法吗？这是脚本的问题，还是别的什么？我会在网站上线时发布一个链接，如果还有其他任何有用的答案让我知道。

Answer 1

尝试通过点击a.ref链接

来防止触发默认操作

$("a.ref").click(function (e) {
   e.preventDefault(); 
}

页面加载后的第一个锚定链接需要两次单击

1 个答案: