I've built an ajax-based webs开发者_开发问答ite that utilizes the address jquery plugin for back forward button browser compatibility. However, since pages are fetched via ajax page conventional page refresh is not obvious and rather disorienting in terms of user navigation etc. User clicks a link, ajax fetches the page, although successful and page is fetched on screen, screen will not go on top of the page especially when the window is longer and clicked link was at the very bottom of the source page. As if nothing has changed. I've attempted to use scrollTo plugin but window scrollTop value upon testing is 0 and zero all the time, removing the address plugin the scrollTop value is now read.
Has anyone encountered the same issue?
Thank you in advance!
Take a look at
$.address.wrap(value)
http://www.asual.com/jquery/address/docs/#api-reference
Or you can use the jquery animate to scroll up. What I've done before is animate the scroling and then change the $.address.value. Like this:
$('a').click(function(e){
e.preventDefault();
var a = $(this);
$('html').animate({ scrollTop: 0 }, 100, function () {
$.address.value(a.attr('href'));
});
});
I had exactly the same problem, tried several ways to scroll to top and i ended up removing the scroll to top button.
Now i have been testing my website with iphone (using bootstrap responsive) and i found out that only the top of the page would be displayed and i wasnt able to scroll at all.
Both issues seems to be related to the wrap option which does something weird to the page.
What i did to fix it was to add some extra parameters when importing the jquery.address.js file in the page:
<script type="text/javascript" src="/script/jquery-address/jquery.address.js?strict=false&wrap=false"></script>
notice the ?strict=false&wrap=false
This seems to work for me :) I hope it helps!
精彩评论