Javascript 页面重定向后的Jquery函数？

看看小提琴

我希望能够通过类似于示例中页脚链接的链接链接到内容区域的不同部分。但是，我希望当在网站的不同页面上按链接时，此功能（滚动到/打开部分）能够正常工作。垂钓者路由系统已经被提出，但不知道API历史或其他方法是如何工作的，也不知道如何实现它们。下面是我找到的另外两个解决方案，但不知道如何实现

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>

脚本

 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'));
            });
        });

---

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

在chrome浏览器上，我曾经尝试过类似的方法，但效果不错，但在其他浏览器上没有：

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

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

我认为在脚本中，根据标记结构和您想要实现的目标，不需要传递

菜单

参数，只需一个

页面

参数就可以了

脚本：

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>

---

.

是否要基于URL片段执行某些函数？检查此链接（）。我想我可以使用任何功能，允许我的链接在我网站的任何页面上工作，就像我的示例中一样。不要认为你更新了fiddle:P，但我今晚晚些时候会尝试一下，并让你知道结果。我的骑士穿着闪亮的jquery盔甲！工作正常，除了在实际页面上的“我的”。滚动到该部分，但不打开有问题的页面

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