折叠部分并滚动回顶部

时间:2018-03-09 17:56:23

标签: javascript jquery

我正在做一个长长的一页。是的,我知道,我们讨厌一个人。至少我保证不会实施任何视差效果,我保证:)

我有多个部分可以打开/关闭。这部分工作正常。

问题:这些部分变得很长,当它们被关闭/折叠时,用户发现自己处于单页面中间的某个位置。

因此,当折叠一个部分时,我希望它折叠并平滑滚动回到顶部/折叠部分的开头。

这是我的剧本:

// Section-Collapse
    //---------------------------------------------------------
    $("section a.read-more").click(function() {
        if($(this).parents("section").hasClass("expanded")) {

            var scrollAnchor = $(this).attr("data-scroll"),
            scrollPoint = $(".anchor[data-anchor='" + scrollAnchor + "']").offset().top - 0;

            $("body,html").animate({
                scrollTop: scrollPoint
            }, 1500, function() {

                // close/collapse section
                $(this).parents("section").addClass("close");
                $("section.expanded.close div.expandable-content").slideUp();
                $(this).parents("section").removeClass("expanded").removeClass("close");
                alert("this test-message is being displayed");

            });


        } else {

            // open section
                $(this).parents("section").addClass("expanded");
                $("section.expanded div.expandable-content").slideDown();


        }
    });

问题:除了警报消息之外,这个部分没有被执行。虽然它试图多次打开对话框窗口,但Firefox让我阻止这种行为。

// einklappen
                    $(this).parents("section").addClass("close");
                    $("section.expanded.close div.expandable-content").slideUp();
                    $(this).parents("section").removeClass("expanded").removeClass("close");
                    alert("this test-message is being displayed");

它滚动回到顶部,到锚点,但该部分不会崩溃......

为什么它不会崩溃的任何想法?

此致 米兰

--------------------------- UPDATE

所以,这是变量范围的问题"这"。

这里的代码似乎工作正常:

// Section-Collapse
    //---------------------------------------------------------
    $("section a.read-more").click(function() {
        if($(this).parents("section").hasClass("expanded")) {

            var scrollAnchor = $(this).attr("data-scroll"),
            scrollPoint = $(".anchor[data-anchor='" + scrollAnchor + "']").offset().top - 0;

            var global_this = $(this);

            $("body,html").animate({
                scrollTop: scrollPoint
            }, 1500, function() {

                // einklappen
                global_this.parents("section").addClass("close");
                $("section.expanded.close div.expandable-content").slideUp();
                global_this.parents("section").removeClass("expanded").removeClass("close");
                alert("this test-message is being displayed");
            });

            // return false;

        } else {

            // ausklappen
                $(this).parents("section").addClass("expanded");
                $("section.expanded div.expandable-content").slideDown();


        }
    });

困扰我的是:为什么这个脚本试图打开多个警报对话框?

0 个答案:

没有答案