显示 DIV，然后转到该 DIV 内的元素

Question

我目前正在尝试取消隐藏 DIV，然后在向下滚动到某个元素后立即取消隐藏。

我有这个文本“索引”，其中有一个锚标签列表，指向页面下方的不同 ID，但乍一看，文本是隐藏的，当您单击其中一个索引链接时会首先显示.在我进入滚动部分之前，这一切都很好。

到目前为止，代码没有什么特别之处，它只是一个 if 语句，根据客户端操作添加和删除 CSS 类。但是如何让页面在 DIV 显示后自动向下滚动？

我尝试了这个解决方案：How to go to specific to element on page，但我似乎无法将其放入我自己的脚本中。

if ($('#<%=paragraph.ClientID%>').hasClass("readable")) {
     $('#<%=paragraph.ClientID%>').removeClass("readable"); // Readable is the class that hides the paragraphs.
     // Run function to scroll down to selected element here.
}
else {
     $('#<%=paragraph.ClientID%>').addClass("readable");
}

我第一次尝试是这样的：

(function($) {
        $.fn.goTo = function() {
            $('html, body').animate({
                scrollTop: $(this).offset().top + 'px'
            }, 'fast');
            return this; // for chaining...
        }
    })(jQuery);

    function showParagraphs(elementId) {
        if ($('#<%=paragraph.ClientID%>').hasClass("readable")) {
            $('#<%=paragraph.ClientID%>').removeClass("readable");
            scrollToElement(elementId);
        }
        else {
            $('#<%=paragraph.ClientID%>').addClass("readable");
        }
    };

    function scrollToElement(elementId) {
        $(elementId).goTo();
    };

但是上面的脚本不起作用。而且我的javascript技能有限，所以我有点迷茫。

任何提示或帮助都会很棒。谢谢。

Answer 1

如果我正确理解您的问题，这是一个简单的解决方案。要等待事件完成，请使用回调函数。

示例代码：

$('.clickable').onclick(function(){
   $('.mydiv').show('slow', function(){
     location.href = '#myElement';
   });
});

And link to jQuery.show() docs

哦，这可能令人困惑......'.clickable' 是你的动作触发器（一个按钮，链接），'.mydiv' 是你显示的 div，#myElement 是你想要滚动到的元素的 id。

Answer 2

您的代码看起来大部分都在工作。我认为你唯一需要改变的是在你的 showParagraphs 函数中你只需要......

将scrollToElement(elementId) 替换为scrollToElement('#<%=paragraph.ClientID%>')

...因为您要从服务器中提取要影响的元素的 id，而不是传入的参数。

---

如果还不行，here's a working demo that I threw together，您可以尝试实施作为替代方案。