Smoothscroll bei breakpoint bzw mobilansicht geht nicht mehr ?

[sfx12]

Hallo @all, ich habe testweise das script aus einer alten backup datei reingeladen, da scheint es zu funktionieren.

Alter CODE (SC geht und macht kein #hashtag in url)

/**
* Initialize smooth scrolling to one page anchor links
*/
jQuery(document).ready(function() {

if(jQuery('body').hasClass('is_regular_page'))
{
jQuery('.smartmenu-content a').addClass('backlink');
jQuery('.onepage_page a').addClass('backlink');
}

var stickyheader = jQuery(".stickyheader");
var header = jQuery(".header.original");
var lastActive = null;
var links = jQuery(".onepage_page .mainmenu a:not(.backlink), .onepage_page .onepagenav a:not(.backlink), .page_navigation a:not(.backlink), .smartmenu-content a:not(.backlink)");
var horizontalScroll = jQuery('body').hasClass('horizontal_scrolling');
// not on mobile devices because content is 100%
if(horizontalScroll && jQuery('body').hasClass('mobile'))
{
horizontalScroll = false;
}
var duration = 700;
var timeout = 300;

// jump to hashtag anchor in url
var strHash = window.location.hash.toString();
if(strHash.length > 0)
{
var target = jQuery(strHash);
if( target.length > 0 )
{
jQuery(strHash+' a').addClass('active');

lastActive = jQuery(".onepagenav a:not(.backlink)[href*=\\"+strHash+"]");
lastActive.addClass('active');
var offsetX = 0;
var posX = target.offset().left - offsetX;
var offsetY = stickyheader.height();
var posY = target.offset().top - offsetY;

jQuery("html, body").animate({scrollTop: posY, scrollLeft:posX},
{
start : function()
{
localStorage.setItem('onepage_animate', 1);
},
complete : function()
{
setTimeout(function()
{
localStorage.removeItem('onepage_animate');
}, timeout);
}
}, 0);
}
}

// set the last anchor to active on page load and scroll to it
if(localStorage.getItem('onepage_active') !== null && localStorage.getItem('onepage_active') != undefined && strHash.length < 1)
{
jQuery.each(links, function(index, elem) {
var hash = this.href.split("#");
if(!hash[1])
{
return;
}
var anchor = hash[1].toString();
if(anchor == localStorage.getItem('onepage_active'))
{
jQuery(elem).addClass('active');
lastActive = jQuery(elem);
}
});

// find target in page
var target = jQuery("#"+localStorage.getItem('onepage_active')) ;
if (target.length > 0)
{
var offsetX = 0;
var posX = target.offset().left - offsetX;
var offsetY = stickyheader.height();
var posY = target.offset().top - offsetY;

jQuery("html,body").stop().animate({scrollTop: posY, scrollLeft: posX}, {
duration : 0,
start : function()
{
// on start: flag that onepage started its animation
localStorage.setItem('onepage_animate', 1);
},
complete : function()
{
setTimeout(function()
{
localStorage.removeItem('onepage_animate');
localStorage.removeItem('onepage_position');
}, timeout);
}
});
}
}

// click event listener
links.click(function(event)
{
var hash = this.href.split("#");
if(!hash[1])
{
return true;
}
var anchor = hash[1].toString();
var target = jQuery("#"+anchor);
if(target.length < 1)
{
return false;
}

// store the current active anchor as cookie for further use
localStorage.setItem('onepage_active', anchor);

var offsetX = 0;
var posX = target.offset().left - offsetX;
var offsetY = stickyheader.height();
var posY = target.offset().top - offsetY;

jQuery("html,body").stop().animate({scrollTop: posY, scrollLeft: posX},
{
duration : duration,
start : function()
{
localStorage.setItem('onepage_animate',1);
},
step : function()
{
// on start: flag that onepage started its animation
localStorage.setItem('onepage_animate',1);
},
complete : function()
{
// on complete: remove the flag
setTimeout(function()
{
localStorage.removeItem('onepage_animate');
}, timeout);

// store last position
localStorage.setItem('onepage_position', { 'x': posX, 'y': posY, 'anchor': anchor });
}
});

// toggle active class
if(lastActive != jQuery(this))
{
links.removeClass('active');

jQuery(".onepagenav a[href*="+anchor+"]").addClass('active');
jQuery(".mainmenu a[href*="+anchor+"]").addClass('active');
jQuery(this).addClass('active');
}

event.preventDefault();
return false;
});
});


/**
* Set navi active on scroll
*/
jQuery(document).ready(function() {
var links = jQuery(".onepage_page .mainmenu a:not(.backlink), .onepage_page .onepagenav a:not(.backlink), .page_navigation a");
var stickyheader = jQuery(".stickyheader");
var header = jQuery(".header.original");
var lastActive = jQuery(".onepage_page .mainmenu a.active, .onepage_page .onepagenav a.active");
var horizontalScroll = jQuery('body').hasClass('horizontal_scrolling');
// not on mobile devices because content is 100%
if(horizontalScroll && jQuery('body').hasClass('mobile'))
{
horizontalScroll = false;
}

var lastScrollX = 0;
var lastScrollY = 0;

jQuery(window).scroll(function()
{
// escape when animation is running
if(localStorage.getItem('onepage_animate') > 0)
{
return;
}

// remove active class from all links
links.removeClass('active');

var scrollX = jQuery(window).scrollLeft();
var scrollY = jQuery(window).scrollTop();
var offsetX = 10;
var offsetY = stickyheader.height();

jQuery.each(links, function(index, elem)
{
var hash = elem.href.split("#");
if(!hash[1])
{
return;
}
var anchor = hash[1].toString();
var target = jQuery("#"+anchor);
if(target.length < 1)
{
return;
}

// vertical scrolling
var posY = target.offset().top - offsetY;
var sizeY = posY + target.height();
if (posY <= scrollY && sizeY >= scrollY && !horizontalScroll)
{
jQuery(elem).addClass("active");
}

// horizontal scolling
var posX = target.offset().left - offsetX;
var sizeX = posX + target.width();
if (posX <= scrollX && sizeX >= scrollX && horizontalScroll)
{
jQuery(elem).addClass("active");
}
});
});

});

NEUER CODE (SC geht nicht bzw. nur desktop)

/**
* Initialize smooth scrolling to one page anchor links
*/
jQuery(document).ready(function ()
{
if ( !jQuery('body').hasClass('onepage_page') )
{
return;
}

if(jQuery('body').hasClass('is_regular_page'))
{
jQuery('.smartmenu-content a').addClass('backlink');
jQuery('.onepage_page a').addClass('backlink');
}

var links = jQuery(".mainmenu a:not(.backlink), #stickyheader .onepagenav a:not(.backlink), .smartmenu-content a:not(.backlink)");
var horizontalScroll = jQuery('body').hasClass('horizontal_scrolling');
// not on mobile devices because content is 100%
if(horizontalScroll && jQuery('body').hasClass('mobile'))
{
horizontalScroll = false;
}

var duration = 300;
var timeout = 200;

// click event listener
links.click(function(event,params)
{
event.preventDefault();

var hash = this.href.split("#");
if(!hash[1])
{
return true;
}
var anchor = hash[1].toString();
var target = jQuery("#"+anchor);
if(target.length < 1)
{
return false;
}

// regular click
if( params == undefined )
{
links.removeClass('active');
}
jQuery(this).addClass('active');

// store the current active anchor as cookie for further use
localStorage.setItem('onepage_active', anchor);

var offsetX = 0;
var offsetY = jQuery("#stickyheader").height();
var posX = target.offset().left - offsetX;
var posY = target.offset().top - offsetY;
var href = jQuery(this).attr('href');

if (params != undefined)
{
posY = params.posY;
posX = params.posX;
}

jQuery("html, body").animate({ scrollTop: posY, scrollLeft: posX },
{
duration : duration,
start : function()
{
localStorage.setItem('onepage_animate',1);
},
complete : function()
{
// on complete: remove the flag
setTimeout(function()
{
localStorage.removeItem('onepage_animate');
}, timeout);

// store last position
localStorage.setItem('onepage_position', JSON.stringify({ 'x': posX, 'y': posY, 'anchor': anchor, 'href': href }) );
}
});
});

// set the last anchor to active on page load and scroll to it
if ( localStorage.getItem('onepage_position') != undefined && window.location.hash.toString().length < 1)
{
var obj = JSON.parse(localStorage.getItem('onepage_position' ));
if( obj.y <= 0 )
{
localStorage.removeItem('onepage_active');
localStorage.removeItem('onepage_position');
localStorage.removeItem('onepage_animate');
return;
}
jQuery('a[href="' + obj.href + '"]').trigger('click', {posY:obj.y});
}

// anchor in url
if ( window.location.hash.toString().length > 0 )
{
localStorage.setItem('onepage_animate',1);
//jQuery("html, body").animate({ scrollTop: 0 },0);

setTimeout(function ()
{
var target = jQuery(window.location.hash.toString());
var offsetX = 0;
var offsetY = jQuery("#stickyheader").height();
var posX = target.offset().left - offsetX;
var posY = target.offset().top - offsetY;
jQuery.each(links, function (index, elem)
{
var hash = elem.href.split("#");
if (!hash[1])
{
return;
}
var anchor = '#' + hash[1].toString();
if (anchor == window.location.hash.toString())
{
jQuery(elem).trigger('click', { 'posY': posY });
}
});
}, timeout);
}
});


/**
* Set navi active on scroll
*/
jQuery(document).ready(function ()
{
var links = jQuery(".onepage_page .mainmenu a:not(.backlink), .onepage_page .onepagenav a:not(.backlink), .page_navigation a");
var stickyheader = jQuery(".stickyheader");
var horizontalScroll = jQuery('body').hasClass('horizontal_scrolling');
// not on mobile devices because content is 100%
if(horizontalScroll && jQuery('body').hasClass('mobile'))
{
horizontalScroll = false;
}

jQuery(window).scroll(function()
{
// escape when animation is running
if(localStorage.getItem('onepage_animate') > 0)
{
return;
}

// remove active class from all links
links.removeClass('active');

var scrollX = jQuery(window).scrollLeft();
var scrollY = jQuery(window).scrollTop();
var offsetX = 10;
var offsetY = stickyheader.height();

jQuery.each(links, function(index, elem)
{
var hash = elem.href.split("#");
if(!hash[1])
{
return;
}
var anchor = hash[1].toString();
var target = jQuery("#"+anchor);
if(target.length < 1)
{
return;
}

// vertical scrolling
var posY = target.offset().top - offsetY;
var sizeY = posY + target.height();
if (posY <= scrollY && sizeY >= scrollY && !horizontalScroll)
{
jQuery(elem).addClass("active");
}

});
});

});

[sfx12]

Idealfall wäre hastag setzen in URl + Smoothscroll auf jedem Endgerät!

[Tim]

Das oben gezeigt Script dient dem Smooth-Scrolling auf OnePager Seiten. Der Effekt ist für Mobile Geräte standardmäßig nicht gesetzt, weil das Mobile Menü die Seite ohnehin überlagert. Man würde es eh nicht sehen.

Der Effekt ist für Tablets, als auch Desktop sichtbar.