YOOtheme Pro is here! The best WordPress and Joomla theme. Learn more

Avatar necati.meral asked

Scrollspy on Yootheme Pro (Fuse-Theme)

Hello,

first at all; Great Work with Yootheme pro, even it's a completely new Framework!
I'm trying to make scrollspy work with the Top Navigation Menu, but I can't get it work.

In Warp 7-Themes (like uniq) there's a Scrollspy-Option in the configuration.
I've tried to manually add

data-uk-scrollspy-nav="{closest:'li', smoothscroll:true}"

on the menu's <ul> Element, but it doesn't work.

Can you show me an example how to get scrollspy working?

Environment:
Joomla 3.6.3
Fuse-Theme: 1.0.5

  • Joomla
  • UIkit
  • YOOtheme Pro

Edited

15 Answers

2

Avatar philipp Yootheme answered

Hi,
just found an easier way:

  1. add the following code to your settings->custom code -> script field:

    jQuery(function () {  
        jQuery('nav.uk-navbar a').each(function() {  
            if(location.pathname == this.pathname)  
                UIkit.scroll(this);  
        });  
    });  
    
  2. Your links in the menu should be from the type external link with the following style:

    /Demo-Fuse/index.php#fromblog
    

After that the smoothscroll should work :)

Kind Regards
Philipp

1

Avatar matthijs Support answered

I'm not sure if this is possible yet in Pro. But I;m sure the one-page navigation option will be available soon.

1

Avatar philipp Yootheme answered

Hi,
by default, this is not possible yet you might need to change the navbar behavior via the child theme.
To do this you need to add the

uk-scroll=""

To the menu items ( this has been changed from UIkit2 to UIkit3 ). So that one menu item should look like this:

<a class="navbar classes" href="#bottom" uk-scroll="">Our Team</a>

Kind Regards
Philipp

Edited

1

Avatar armin.frischknecht answered

Thanks for the code, works perfekt for anchor links in the menu. But the initial question was "scrollspy" – and that's where I just spent to much time to get no reasonable solution. Could you please provide some code adding the spy function for yootheme pro. I think we all would appreciate this :-)
I'm not used to uikit3 yet an this new yootheme pro feeling. In warp7 I could manage this myself …

1

Avatar john.burk answered

Hi,

is it possible to make the code work for all browsers, in Safari it just skips to the section instead of scrolling, chrome it works fine

Thank You

1

Avatar anton.troshkin answered

i use the code:

jQuery(function(){  
jQuery('a[href^="#"]').click(function(){  
var target = jQuery(this).attr('href');  
jQuery('html, body').animate({scrollTop: jQuery(target).offset().top}, 800);//800 - длительность скроллинга в мс  
return false;  
});  
});

Edited

0

Avatar guilherme.borba answered

I am also unable to activate the Scrollspy!!!. Please yootheme, post an update for this.

0

Avatar necati.meral answered

Hey,

thank you Philipp for your answer.
Currently I'm not at Home so I just could test the Custom JS Code.
The smooth-scrolling effect works; thanks.

Will the ScrollSpy work when I'm gonna add the
uk-scroll=""
attribute to the Menu Items via PHP-Editing in the child theme?

0

Avatar philipp Yootheme answered

No I don't think so, I couldn't get it to run on my local machine as well, but maybe I missed something there :)

0

Avatar necati.meral answered

I think it should be doable with UIKit.
Since the UIKit 3 API has appearently changed, the in the UIKit documentatin described ways to do this aren't working.

When the user navigates with the Menu everything is fine; the items are highlighted (because of a:active).
The ScrollSpy is the only missing thing that makes this template great.

0

Avatar philipp Yootheme answered

Jeah just use the js code above it uses UIkit3 scrollspy component :)

0

Avatar micha.welter.42 answered

i tryed to add those ankers to the "id" of each section. this is already working useing normal links:

<a href="#yourID">Scroll to YourID</a>
0

Avatar micha.welter.42 answered

thanks anton.troshkin for sharing your code.

Where did you put it, in the custom js code?

Can you set offset for scrolling with that code?

Know someone who can answer? Share a link to this question via email or twitter.