重定向到其他页面然后动画以达到某个scrollTop

想要做到与其他页面的内部链接完全相同的内容！ 但是通过jquery。 不能使用常规的外部跳跃作为使用视差滚动，这与那样的跳跃不相符。

对于内部链接，我使用了这样的东西 –

$(function() { $("#clickNews").click(function(e){ e.preventDefault(); $('html,body').animate({scrollTop: 2400}, 1500); }); }); 

但是如何执行重定向后跟animate（）？

我想点击一个页面上的一个锚..来到另一个页面的某个scrollTop

这是一种方式 – >>

 $("#clickCatalog").click(function(e){ e.preventDefault(); window.location = '/ABC/'; window.load(function(){ $('html,body').animate({scrollTop: 0}, 1500); }); }); 

Answer 1

请参阅动画function的文档http://api.jquery.com/animate/

您可以传递将重定向为第四个参数的函数，也可以使用带有’complete’键的函数作为值传递options对象

像这样的东西：

 $(function() { $("#clickNews").click(function(e){ e.preventDefault(); $('html,body').animate({scrollTop: 2400}, { duration: 1500, complete: function() { window.location = '{url}'; } }); }); }); 

Answer 2

您可以做的最接近的事情是通过ajax加载您想要的页面，加载到元素中。

有点像：

 $('a.internal').click(function(event){ //Put class="internal" to load with ajax... event.stopPropagation(); event.preventDefault(); var newPage = $('
'); var oldPage = $('.page'); newPage.css('opacity',0); oldPage.animate({opacity:0, top: -5000 }, { complete: function(){ newPage.animate({opacity:1}); } } newPage.load('http://localhost/myNewPage.html body >'); $('body').append(newPage).animate({'scrollTop':0}); }); 

请注意，它未经测试但应该可以正常工作。

编辑：修正了一些拼写错误

Answer 3

您还可以使用localStorage执行此任务。 我尝试了一次，它对我有用。 我在导航选项卡中使用它，这就是我将元素id传递给localStorage 。

 $('#block li').click(function (){ //get the clicked element's id. eg:- id='1' var menu_selector = $(this).attr('id'); //store the value into localStorage localStorage.setItem('selector', menu_selector); //do the redirection window.location.replace("/about"); }); //if localStorage is not empty if(localStorage.getItem('selector') != 'undefined' && localStorage.getItem('selector') != null) { // get the stored values var selector = localStorage.getItem('selector'); //I'm asuming, my destination is 
 var destination = $('#destination-'+selector); //now do the scrollTop $('html, body').animate({ scrollTop: destination.offset().top - 50 }, 700); //distroy the local storage window.localStorage.clear(); }); 

另请注意，这不适用于非常旧的浏览器。