Question

我希望创建一个页面，允许使用页面内容的后退和前进按钮。我已经使用

中的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元素划分为不同的“页面”

更新

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

jsfiddle.net/d7uZ7/6

jquery的底部是用于在后退或前进页面事件后触发滚动的内容

SOLUTION：

因此经过很长一段时间的努力，已经找到了一种解决方案（各种解决方案）。另外，如果没有与 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事件而其他人则没有。奇怪的是，一些旧的浏览器也能正常工作。

第二种方法，虽然速度慢得多（动画开始时有明显的延迟），但几乎所有浏览器都能正常工作。是的，只是半井，有时它仍然失败。所以现实情况是，由于浏览器没有正确使用这些标签，你很可能会在页面转换过程中遇到无聊的旧动态非背景和前进。好难过。除非你想做大量的编码。

Answer 1

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

页面后退按钮滚动jQuery

1 个答案: