jQuery在页面后退按钮滚动

我期待创建一个页面，允许在页面内使用后退和前进按钮。我已经完成了使用jQuery地址的基本功能在jQuery在页面后退按钮滚动

http://www.asual.com/jquery/address

我遇到的问题是如何获得的回调函数工作在特色与jQuery scrollTo插件协调，提供动画后退和前进滚动体验。

//Navigation between slides 
$('.nav-button').click(function(e) { 
    e.preventDefault(); 
    $.scrollTo($(this).attr('href'), 'slow', {easing:'easeInOutExpo'}); 
}); 

//Storage and activation of back and forwards attributes 
$('a').click(function() { 
    $.address.value($(this).attr('href')); 
}); 

//Callback to scroll on back or forwards 
//NEED HELP HERE 
$.address.change(function(event) { 
    $.scrollTo(event.value(), 'slow', {easing:'easeInOutExpo'}); 
});

正如我确信你能看到问题真正地不是那么困难，但由于我还在学习它是我的知识范围。任何帮助深表感谢。

的所有内容都包含在一个页面有一个共同的阶级划分成不同的“页”通过使用不同的div元素内

UPDATE：

我创建了一个小提琴显示问题更清楚。

jsfiddle.net/d7uZ7/6

的jQuery的底部是什么，是要使用的后退或前进网页事件

解决方案后，触发滚动：

所以经过很长一段时间与这个解决方案（各种）已被发现。另外，我不应该没有与JacobMcLock聊天没有这是可能的。

总之，我原来的职位的最后一节应更改为以下两个代码块

//Method 1 
$.address.change(function (event) { 
    var value = event.value, 
    i = value.indexOf('#'), 
    $element = (i === -1) ? $("body") : $(value.substr(i, value.length-1)); 
    $.scrollTo($element, 'slow', {easing:'easeInOutExpo'}); 
}); 

//Method 2 
$(window).on('hashchange', function(event) { 
    event.preventDefault(); 
    $.address.change(function (event) { 
     var value = event.value, 
     i = value.indexOf('#'), 
     $element = (i === -1) ? $("body") : $(value.substr(i, value.length-1)); 
     $.scrollTo($element, 'slow', {easing:'easeInOutExpo'}); 
    }); 
});

使用最佳的速度第一个块中的一个，但缺乏兼容性。这将在Chrome和Safari中按照需要运行，并且在其他情况下会出现问题。这是因为他们正确处理hashchange和popstate事件，而其他人则没有。奇怪的是一些较旧的浏览器也可以正常工作。

第二种方法尽管速度慢得多（在动画开始时有一个明显的延迟），但几乎所有浏览器都能很好地工作。是的，只是半井，有时它仍然失败。所以现实情况是，由于浏览器没有正确使用这些标签，你可能会在页面转换中陷入枯燥的未动画非前后移动。好难过。除非你想做一个不朽的编码。

来源

2013-05-13 foochow

所以，如果任何人都可以找到比这更好的东西，一定要在这里发布。但我认为这是现在最好的。 – foochow 2013-05-13 23:13:10

我不认为event.value()是你想要的。请参阅此页上的示例以了解event.value的实际内容：http://www.asual.com/jquery/address/samples/api/。它是来自URL的字符串，而不是href或元素ID。您必须额外做些事情才能真正从该值中获取要滚动的元素，这取决于您如何将值注入URL中。

来源

2013-05-13 17:30:26 JacobMcLock

是'event.value（）'是我卡住的地方。只需要检索正确的元素ID。或者以正确的方式格式化字符串。 – foochow 2013-05-13 17:32:36

你是如何构建网址的？只需添加“/”或像“/？id = x” – JacobMcLock 2013-05-13 17:39:27

查询字符串的新部分我一直在使用jQuery地址的插件默认值。所以每次点击一个链接时，它会改变为例如** index.html＃/＃contact-us ** – foochow 2013-05-13 17:43:56

jQuery在页面后退按钮滚动

回答

相关问题