Hi,
Interior Onepage comes with smooth scroll to anchor links in Header-Section-Menu and also off-canvas-menu.
I now want to place some additional links, buttons in content or in quix-pagebuilder with #anchor targets.
They shoult also “smooth scroll”, as it is in header-menu. But they do not scroll by default.
Is that possible somehow? exists a class for that?
It would be very nice and usefull, because “in-content-links” are often used, but without scrolling the User does not feel if the target is below, above or somewhere else on the site.
Thank you and kind regards from switzerland
Heinz
Hi Heinz,
Just add custom js code via template settings
<!-- SMOOTH SCROLL -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
</script>
<!-- End of SMOOTH SCROLL -->then give a try with smooth scroll again for the custom link
Hi Brian
I added code in Template wt_interior_pro – One Page in the field “Custom Javascript”.
Result: The Site will not load – it’s just showing the preloader…
For your information about my installation: I installed your Interior “QuickInstallation” Pack, no big changes made so far…
what to do?
Regards Heinz
Sorry, I just modifed the js script and problem solved. The js look like so
jQuery(function ($) {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
You must be logged in to reply to this topic.
