Support ForumSmooth Scroll Main Menu Anchor Links for One-Page Website – Support Forum

Smooth Scroll Main Menu Anchor Links for One-Page Website

deryasari — Thu, 14 Jan 2016 02:42:20 +0000

How do I get main menu same-page anchor navigation links to work with smooth scrolling? I’ve tried exposing the CSS Classes option in custom link menu properties and inserted “smooth-scroll” and saved.

https://52.70.39.122/wp-content/uploads/2016/01/Screen-Shot-2016-01-13-at-8.59.25-PM.png

However it doesn’t work. In fact it stops the anchor from working entirely. It works without that attribute but then goes straight to that location on the page rather than smooth scrolling to that location. You can see the site in progress here and click on the “about” link in the main menu to see what I’m talking about.

https://52.70.39.122

How do I get smooth scrolling to work with anchors in the main menu on the same page?

Thanks in advance.

Reply To: Smooth Scroll Main Menu Anchor Links for One-Page Website

IshYoBoy — Thu, 14 Jan 2016 08:36:17 +0000

Hi there,

Unfortunately you need to “implement” it in order to work, because when adding a class-name to the navigation items, WordPress adds it to the containing “li” element and not the “a” which is the link itself.

Soo.. open the file:
/wp-content/themes/minicorp/assets/html/core/libs/js/main.js

and around line 651 you should find:

/*
* Smooth scroll
*/
$('.smooth-scroll').smoothScroll();

* Smooth scroll

$('.smooth-scroll').smoothScroll();

try changing it to:

/*
* Smooth scroll
*/
$('.smooth-scroll, .smooth-scroll a').smoothScroll();

* Smooth scroll

$('.smooth-scroll, .smooth-scroll a').smoothScroll();

Make sure to upload this file to your current webpage. Make sure the menu link you are testing has the additional “.smooth-scroll” class. Then clear your browser’s cache memory (and if you are using caching plugin, clear its cache) so you ensure the latest JS file is used.

If still not working then change it to:

/*
* Smooth scroll
*/
$('.smooth-scroll, .menu-smooth-scroll a').smoothScroll();

* Smooth scroll

$('.smooth-scroll, .menu-smooth-scroll a').smoothScroll();

Repeat all steps just for the menu use the new class name “menu-smooth-scroll”.

Hope it solves it.

Cheers

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market

Reply To: Smooth Scroll Main Menu Anchor Links for One-Page Website

deryasari — Thu, 14 Jan 2016 14:01:17 +0000

Thank you! That did the trick. One question however, if the the theme gets updated at some point in the future and I click update in WordPress, will this change be overwritten and need to be put into place again?

If so, can this change be simply added to your theme by you so it’s there for all users to take advantage of without edits?

Thanks again.

Reply To: Smooth Scroll Main Menu Anchor Links for One-Page Website

IshYoBoy — Fri, 15 Jan 2016 07:53:21 +0000

Hey,

Which one did the trick for you?

You are right. It will be lost and yes we will add it. Just let us know which one worked for you.

Cheers

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market

Reply To: Smooth Scroll Main Menu Anchor Links for One-Page Website

deryasari — Fri, 15 Jan 2016 13:09:41 +0000

The one that worked was the first recommendation. Adding “.smooth-scroll a” to the css line in the .js file. Then also adding “smooth-scroll” in the menu panel under CSS Class.

Thanks again!

Reply To: Smooth Scroll Main Menu Anchor Links for One-Page Website

IshYoBoy — Fri, 15 Jan 2016 14:47:53 +0000

Cool,

Thanks for letting us know. The following code will make it to the next theme update:


/*
* Smooth scroll
*/
$('.smooth-scroll, .smooth-scroll a').smoothScroll();

* Smooth scroll

$('.smooth-scroll, .smooth-scroll a').smoothScroll();

Have a nice weekend,
Cheers

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market