Joomla Templates Club 406,261 posts

[Mark Kennedy Friend Mark KennedyJoin date: September 2014Posts: 79Downloads:0Uploads:9 Thanks: 27 Thanked: 11 times in 1 posts]

#192404

I can’t get smooth scroll to work for a link in some text.

<a href="index.php?itemid=93#get_in_touch">joining us</a>

or

<a href="#get_in_touch">joining us</a>


These take me to the correct section, there is just no smooth scroll.
Is there a class that I need to add to get it to work?

the back to top works fine

<a id="back-to-top" class="back-to-top" title="Back to top" href="#">

Back to top

</a>

and so does Arrow down

<a class="arrow-down img-circle" href="#studio_hire">

Arrow down

</a>

What am I missing?

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#512999

On JA Onepage template, our template developers do include the scripts to control the duration of scroll templatesja_onepagejsscript.js file at lines:

$('.arrow-down, .btn-tpl-1').on('click', function(){
if (window.location.href.replace(/([^#]*)(.*)/, '$1') != this.href.replace(/([^#]*)(.*)/, '$1')){
return true;
}

var target = this.hash ? this.hash : this.href.replace(/.*(?=#[^s]+$)/, '');
if(target.substr(0, 1) == '#'){
target = $(target);

$('html, body').stop(true).animate({
scrollTop: Math.max(0, target.offset().top - ($('#ja-header').height() || 0) + 1)}, {
duration: 800,
easing: 'easeInOutCubic',
complete: window.reflow
});

return false;
}
});

You can try to change the red texts with your selected classes.

[Mark Kennedy Friend Mark KennedyJoin date: September 2014Posts: 79Downloads:0Uploads:9 Thanks: 27 Thanked: 11 times in 1 posts]

#513001

Tried it with the arrow-down class and it worked great! 🙂

1 user says Thank You to Mark Kennedy for this useful post

1. Saguaros

[Author]

Posts