javascript - 页面重定向后的 Jquery 函数？

Question

检查 fiddle !

The Fiddle

我希望能够通过与示例中的页脚链接类似的链接链接到内容区域的不同部分。但是，当在站点的不同页面上按下链接时，我希望此功能(滚动到/打开该部分)起作用。 Anglers 路由系统已被建议但不知道 API 历史或其他方法实际如何工作或如何实现它们。我发现的另外两个解决方案但无法弄清楚如何实现如下。

Solution1? Solution2?

HTML

  <div class="content-slide-menu" data-menu="1">
            <ul class="menu">
                <li id="link1"> <a href="#null" data-page="1">blah blah</a>

                </li>
                <li id="link2"> <a href="#null" data-page="2">twit twoo</a>

                </li>
            </ul>
        </div>
        <div class="content-slide">
            <div id="page1" class="content">
                 <h3>blah blah</h3>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nibh eros, commodo sit amet risus a, bibendum venenatis mi. In sed tempus ante. In ac molestie tortor. Proin convallis, diam facilisis volutpat blandit,</p>
                <div class="dots"><span>...</span>
                </div>
            </div>
            <div id="page2" class="content">
                 <h3>twit twoo</h3>

                <p>Quisque quis suscipit augue. Quisque eu augue eu elit imperdiet posuere. Integer tempor metus consectetur interdum porta. Fusce condimentum, metus eu commodo dapibus, diam metus vestibulum lacus,</p>
                <div class="dots"><span>...</span>
                </div>
            </div>
        </div>
        <div style="clear:both;"></div>
        <div class="content-slide-menu" data-menu="2">
            <ul class="menu">
                <li id="link3"> <a href="#null" data-page="3">Sit Amet</a>

                </li>
                <li id="link4"> <a href="#null" data-page="4">lorem ipsum</a>

                </li>
            </ul>
        </div>
        <div class="content-slide">
            <div id="page3" class="content">
                 <h3>Sit Amet</h3>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nibh eros, commodo sit amet risus a, bibendum venenatis mi. In sed tempus ante. In ac molestie tortor. Proin convallis, diam facilisis volutpat blandit,</p>
                <div class="dots"><span>...</span>
                </div>
            </div>
            <div id="page4" class="content">
                 <h3>lorem ipsum</h3>

                <p>Quisque quis suscipit augue. Quisque eu augue eu elit imperdiet posuere. Integer tempor metus consectetur interdum porta. Fusce condimentum, metus eu commodo dapibus, diam metus vestibulum lacus,</p>
                <div class="dots"><span>...</span>
                </div>
            </div>
        </div>
        <div style="clear:both;"></div>
        <div id="footer"> 
            <a href="javascript:showAndScroll(1, 2)" title="Twit Twoo" id="twit-twoo">Twit Twoo</a>
            <br>
            <a href="javascript:showAndScroll(2, 4)" title="lorem ipsum" id="lorem-ipsum">lorem ipsum</a>
        </div>

CSS

    .content-slide-menu {
        float:left;
        width:220px;
        padding:0 10px;
    }
    .content-slide-menu li {
        list-style-type:none;
    }
    .content-slide-menu a {
        text-decoration:none;
        color:#2b2b2b;
        font-size:135%;
    }
    .content-slide-menu a:hover {
        color:#3ca3c5;
    }
    .content-slide {
        float:left;
        width:440px;
        margin-top:65px;
    }
    .content-slide .content {
        display:none;
    }
    .content-slide .content h3 {
        font-size: 150%;
        font-weight: bold;
    }
    .content-slide .content p {
        margin:5px 0;
        font-size:110%;
    }
    .dots {
        font-size:350%;
        font-weight:bold;
    }
    .active {
        color:#3ca3c5!important;
    }


    #footer {margin-top:800px;}

脚本

 function showPage(menu, page) {
            $slider = $(".content-slide-menu[data-menu='" + menu + "']").first();
            $slider.next().children('.content').hide();
            $("#page" + page).show();
            $slider.find('a.active').removeClass("active");
            $("#link" + page).children().addClass('active');
        }
        function showAndScroll(menu, page) {
            showPage(menu, page);
            $('html, body').animate({
                scrollTop: $slider = $(".content-slide-menu[data-menu='" + menu + "']").first().offset().top
            }, 1000);
        }
        $(document).ready(function () {
            $(".menu a").click(function () {
                var $this = $(this),
                    $slider = $this.closest('.content-slide-menu');
                showPage($slider.data("menu"), $this.data("page"));
            });
            $(".content-slide-menu").each(function(index, that) {
                showPage($(that).data('menu'), $(that).find("a").first().data('page'));
            });
        });

Answer 1

实际上没有什么好的方法可以阻止默认哈希跳转的执行，尤其是在页面加载时，因为每个浏览器对此都有不同的行为。

我之前在 chrome 上尝试过类似的东西并且它有效，但在其他浏览器上没有:

$(window).load(function() {
    $(window).scrollTop(0);
    //and do your animate scrolling
});

但是有一个很好的技巧，你可以传递一个散列，它在你的 html 上没有确切的 id，但至少应该有 page-id。

我认为在你的脚本中，你不需要根据你的标记结构和你想要实现的目标传递 menu 参数，只需一个 page 参数就可以了很好。

脚本:

function showPage(page) {
    //show the target page and hide siblings
    $("#page" + page).show().siblings().hide();
    $("#link" + page).children().addClass('active').parent()
    .siblings().children().removeClass('active');
}

function showAndScroll(page) {
    showPage(page);
    $('html, body').animate({
        scrollTop: $("#link" + page).closest('.content-slide-menu').offset().top
    }, 1000);
}
$(document).ready(function () {
    $(".menu a").click(function () {
        var $this = $(this);
        showPage($this.data("page"));
    });

    $(".content-slide-menu").each(function () {
        showPage($(this).find("a").first().data('page'));
    });
    //on DOM ready get the hash value and extract the page id number 
    var hash = window.location.hash,
        page = hash.replace(/[^0-9]/g, '');
    //then execute showAndScroll to this page
    showAndScroll(page);

});

在您的其他页面上，您的链接应该是这样的:

<a href="page.html#page-2" title="Twit Twoo">Twit Twoo</a>

Jsfiddle demo .