1

我正在寻找一个页面，允许使用页面内的内容的后退和前进按钮。我已经使用 jQuery Address 完成了基本功能，如

  • 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 的底部是用于在后退或前进页面事件后触发滚动的内容

解决方案：

因此，在与这个问题斗争了很长时间之后，已经找到了一个解决方案（某种）。此外，如果没有与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事件，而其他人则没有。奇怪的是，一些较旧的浏览器也可以正常工作。

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

4

1 回答 1

1

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

于 2013-05-13T17:30:26.233 回答