页面重定向后的Jquery函数？

Question

看看小提琴！

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.