jQuery在页面后退按钮滚动
Posted
技术标签:
【中文标题】jQuery在页面后退按钮滚动【英文标题】:jQuery in page back button scrolling 【发布时间】:2013-05-07 19:27:57 【问题描述】:我希望创建一个页面,该页面允许对页面内的内容使用后退和前进按钮。我已经使用 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
事件,而其他人则没有。奇怪的是,一些较旧的浏览器也能正常工作。
第二种方法虽然慢得多(动画开始有明显的延迟),但几乎可以在所有浏览器中正常运行。是的,只是半好,有时它仍然失败。所以现实情况是,由于浏览器没有正确使用这些标签,你可能会在页面转换中陷入无聊的旧的非动画来回。好难过。除非你想做大量的编码。
【问题讨论】:
因此,如果有人能找到比这更好的东西,请务必在此处发布。但我认为这是目前最好的。 【参考方案1】:我不认为event.value()
是你想要的。有关 event.value
的实际含义,请参阅此页面上的示例:http://www.asual.com/jquery/address/samples/api/。它是来自 URL 的字符串,而不是 href 或元素 ID。您必须做一些额外的事情才能从该值实际获取要滚动到的元素,这取决于您将值注入 URL 的方式。
【讨论】:
是的event.value()
是我卡住的地方。只需要检索正确的元素 id。或者以正确的方式格式化一个字符串。
你是如何构建 URL 的?只需使用“/”或查询字符串(如“/?id=x”)添加新部分
我一直在使用来自 jQuery 地址的插件默认值。因此,每次单击链接时,它都会更改为例如 index.html#/#contact-us
$(event.pathNames[0]).attr('href')
之类的内容可能会有所帮助。在您的示例中,“联系我们”映射到什么?一个具有“contact-us”类或 id 为“contact-us”的元素?
所有内部链接都映射到具有该 id 的元素以上是关于jQuery在页面后退按钮滚动的主要内容,如果未能解决你的问题,请参考以下文章
jquery mobile+html5 写的页面 如何禁用手机后退按钮。或者说如何禁用页面后退。