I'm using the JQuery scrollTo plugin on our one-page site to vertically scroll between the different sections.
The scroll works well in all browsers except iOS Safari which scrolls but is very jerky. I'm using a number of other Jquery plugins on the page so it may be a conflict with one of these.
If anyone knows an alternative to scrollTo that works smoothly on the iPad or can suggest where to start tackling the issue I'd appreciate the help. I've tried this solution but without success.
Try this one
$.scrollTo(SELECTOR, 800, {
'axis':'y'
});
Thanks for the tip Arnar.
Your advice put me on the right path and with the help of this JSFiddle i now have exactly the smooth scroll i wanted to achieve with smooth animated scroll to each section and automatic highlighting of the active menu item.
// Cache selectors
var lastId,
topMenu = $("#top-menu"),
topMenuHeight = topMenu.outerHeight()+15,
// All list items
menuItems = topMenu.find("a"),
// Anchors corresponding to menu items
scrollItems = menuItems.map(function(){
var item = $($(this).attr("href"));
if (item.length) { return item; }
});
// Bind click handler to menu items
// so we can get a fancy scroll animation
menuItems.click(function(e){
var href = $(this).attr("href"),
offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+1;
$('html, body').stop().animate({
scrollTop: offsetTop
}, 300);
e.preventDefault();
});
// Bind to scroll
$(window).scroll(function(){
// Get container scroll position
var fromTop = $(this).scrollTop()+topMenuHeight;
// Get id of current scroll item
var cur = scrollItems.map(function(){
if ($(this).offset().top < fromTop)
return this;
});
// Get the id of the current element
cur = cur[cur.length-1];
var id = cur && cur.length ? cur[0].id : "";
if (lastId !== id) {
lastId = id;
// Set/remove active class
menuItems
.parent().removeClass("active")
.end().filter("[href=#"+id+"]").parent().addClass("active");
}
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With