页面返回按钮滚动中的jQuery [英] jQuery in page back button scrolling
问题描述
我正在寻找创建一个页面，该页面允许使用向后和向前按钮显示页面中的内容.我已经使用
I am looking to create a page that allows use of the back and forwards buttons for content within the page. I have accomplished the basic functionality using jQuery Address as featured at
- http://www.asual.com/jquery/address
我遇到的问题是如何使回调函数与jQuery scrollTo插件协同工作，以提供动态的前后滚动体验.
The issue I am having is how to get the callback function to work in coordination with jQuery scrollTo plugin to provide an animated back and forwards scrolling experience.
//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'});
});
我确定您可以看到问题确实不是那么困难，但是由于我仍然在学习，因此超出了我的知识范围.非常感谢您的帮助.
As Im sure you can see the problem really isnt that difficult, but since Im still learning it is out of the scope of my knowledge. Any help is much appreciated.
所有内容都包含在一个页面中，通过使用具有共同类的各种div元素将页面分为不同的页面"
All of the content is contained within one page divided into different "pages" by the use of various div elements with a common class
更新:
我创建了一个小提琴，以便更清楚地显示问题.
I created a fiddle to display the issue more clearly.
jsfiddle.net/d7uZ7/6
jsfiddle.net/d7uZ7/6
jquery的底部是用于后退或前进页面事件后触发滚动的内容
The bottom section of jquery is what is to be used to trigger the scrolling after a back or forward page event
解决方案:
因此，在对此进行了长时间的斗争之后，找到了一种(各种各样的)解决方案.另外，如果没有与 JacobMcLock 聊天，我也不应该没有.
So after a long time battling with this a solution (of sorts) has been found. Also, I should not that without the chat with JacobMcLock none of this would have been possible.
无论如何，我的原始帖子的最后一部分应更改为以下两个代码块之一
Anyhow, the last section of my original post should be changed to one of the two following code blocks
//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事件，而其他事件则不能.奇怪的是，某些较旧的浏览器也可以正常运行.
Use the first block for the best speed, but with lack of compatibility. This will function as desired in Chrome and Safari and will be glitchy in others. This is because they handle hashchange and popstate events correctly while others do not. Oddly some older browsers will also work properly.
第二种方法虽然慢得多(动画开始时会有明显的延迟)，但几乎可以在所有浏览器中正常运行.是的，只是半井，有时仍然失败.因此，现实情况是，由于浏览器未正确使用这些标签，因此您可能会陷入无聊的旧非动画状态中来回切换页面.好难过.除非您想进行大量的编码.
The second method, while much slower (there is a notable delay on animation start), will work in almost all browsers semi-well. Yep, just semi-well, sometimes it still fails. So the reality is that due to browsers not using these tags correctly youre likely stuck with boring old non-animated back and forward in page transitions. So sad. Unless you feel like doing a monumental amount of coding.
推荐答案
我不认为event.value()是您想要的.请参阅本页上的示例，以了解event.value的实际含义: http://www. asual.com/jquery/address/samples/api/.它是URL中的字符串，而不是href或元素ID.您需要做一些额外的事情才能真正从该值获取要滚动到的元素，这取决于您如何将该值注入URL.
I don't think that event.value() is what you want. See the examples on this page for what event.value actually is: http://www.asual.com/jquery/address/samples/api/. It is a string from the URL, and not an href or element ID. You'll have to do something extra to actually get the element that you want to scroll to from that value, which depends on how you are injecting the value into the URL.
这篇关于页面返回按钮滚动中的jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
