页面重定向后的Jquery函数？

看看小提琴！

小提琴

我希望能够通过类似于示例中的页脚链接的链接链接到内容区域的不同部分。 但是，当在网站的不同页面上按下链接时，我希望此function（滚动到/打开该部分）工作。 已建议使用钓鱼者路由系统，但不知道API历史记录或其他方法如何实际工作或如何实现它们。 我找到的另外两个解决方案，但无法弄清楚如何实现如下。

解决方法1？ 溶液2？

HTML

 
 
 blah blah 
 
 twit twoo 
 
 
 
 
 
blah blah
 
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,
 
... 
 
 
 
twit twoo
 
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,
 
... 
 
 
 
 
 
 
 Sit Amet 
 
 lorem ipsum 
 
 
 
 
 
Sit Amet
 
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,
 
... 
 
 
 
lorem ipsum
 
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,
 
... 
 
 
 
 
 Twit Twoo 
 lorem ipsum  

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

在您的其他页面上，您的链接应如下所示：

 Twit Twoo 

Jsfiddle演示 。