jQuery的页面后退按钮滚动(jQuery in page back button scrolli

2019-10-18 03:45发布

我期待创建一个网页,允许使用页面内的背部和前进按钮的内容。 我已经完成了使用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的的底部是什么,是要使用的后退或前进网页事件后触发滚动

解:

所以经过长时间用(的种类),这样的解决方案争夺已经找到。 另外,我不应该,没有与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,并会在别人出问题这将起作用。 这是因为他们处理hashchangepopstate正确事件,而有的则没有。 奇怪的是一些旧的浏览器也可以正常工作。

第二种方法,比较慢(无动画开始显着延迟),将在几乎所有的浏览器半好。 是的,只是半好,有时它仍然失败。 所以,现实情况是,由于浏览器不使用这些标签正确的youre可能陷入枯燥旧的非动画回和页面过渡转发。 好难过。 除非你喜欢做编码的一个巨大的量。

Answer 1:

我不认为event.value()是你想要的。 此页面上看到的例子什么event.value居然是: http://www.asual.com/jquery/address/samples/api/ 。 它是从URL的字符串,而不是一个href或元件ID。 你必须做些额外的事情真正得到你想要滚动到从该值,这取决于你如何注入值到URL的元素。



文章来源: jQuery in page back button scrolling