Question

我目前正试图取消隐藏DIV，然后向下滚动到元素。

我有这个文本的“索引”，其中我有一个锚点标记列表href'到页面下方的不同ID，但乍一看文本是隐藏的，当你点击其中一个索引链接时将首先显示。所有这一切都很好，直到我进入滚动部分。

到目前为止，代码没有什么特别之处，它只是一个if语句添加＆amp;根据客户端操作删除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

您的代码看起来很有效。我认为你唯一需要改变的是你的showParagraphs功能，你只需要......

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

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

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

Answer 2

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

示例代码：

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

And link to jQuery.show() docs

哦，也许这让人感到困惑......'.clickable'是你的动作触发器（按钮，链接），'。mydiv'是显示的div，＃myElement是你要滚动到的元素的id。

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

2 个答案: