Smooth Scrolling to Anchors, and JQuery

[Barrante]

Before I get into it – does Flexform have a built in “smooth scroller” for anchor links, that can be leveraged? We are shifting the use of the template to a single long scroller with anchor links from the Main Menu.

I tried a couple of plugins and they are bit clunky, no real easing through the scroll.

If there isn’t something built into the theme, I was trying to implement this developer’s code which in his demo works much smoother. The trick is, I don’t know where to drop it. I’d also like to added it somewhere through the admin so it doesn’t get wiped in a theme update.

Here’s the code:

$('a[href^="#"]').bind('click.smoothscroll',function (e) {
e.preventDefault();
var target = this.hash;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 500, 'swing', function () {
window.location.hash = target;
});
});

Which he recommended gets dropped into $(document).ready tag.

I appreciate the help!

[Cosmin – SUPPORT]

Hi,

There’s no option to add JS in the admin, so you would need to either use a child theme or create your own mini plugin that adds the code in the footer (using wp_footer hook).

P.S.: you don’t need to use document.ready if adding the code to the footer, as the DOM will already be ready when the browsers reaches your script in the footer.

Regards,

————————————————————————————————————

Cosmin
Support Assistant