頁面重定向后的Jquery函數？

Question

看看小提琴！

小提琴

我希望能夠通過類似於示例中的頁腳鏈接的鏈接鏈接到內容區域的不同部分。 但是，當在網站的不同頁面上按下鏈接時，我希望此功能（滾動到/打開該部分）工作。 已建議使用釣魚者路由系統，但不知道API歷史記錄或其他方法如何實際工作或如何實現它們。 我找到的另外兩個解決方案，但無法弄清楚如何實現如下。

解決方法1？ 溶液2？

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演示 。