[Matt SParticipant]

Hi there. Please can you help me with this issue.

I have setup one page navigation, following the tutorial here: http://theme.co/x/member/kb/how-to-setup-one-page-navigation/
The smooth scrolling is working very nicely when clicking on the main menu. But I want some buttons within the page itself to scroll nicely to a section of the page. I’ve set the buttons to go to what I believe to be the correct part of the page, using tags: #x-content-band-5, 6, 7.
The buttons link to the correct ‘row’, but it goes about half way down the content row -so the top is chopped off. Also it jumps, rather than scrolling smoothly.

Is there a simple fix to this? I’m not great with coding, but I can figure it out if I need to paste something in there! Any help is very much appreciated.

heres my site, currently in construction: http://www.corosoniclab.co.nz
wordpress version 3.9.1

the buttons I want to smooth scroll are the ‘recording’ ‘mixing’ ‘livesound’ buttons.

Thanks!
Matt

[AlexanderKeymaster]

Hi Matt,

The one page navigation is only setup to work with the menu items. There is a code snippet you can use though.

First, put this under Customizer > Custom > Javascript

jQuery(function($){
  $('a.x-btn.one-page').click(function(e){
    e.preventDefault();
   
    $('html,body').animate({
      scrollTop: $('#' + $(this).attr('href').split("#").slice(-1)[0] ).offset().top - $('.masthead').height()
    },700 ,'swing');
  });
});

Next, edit your buttons and add a custom class of one-page

The code will find all buttons with that class, and change their behavior to scroll within the same page.

[Matt SParticipant]

Oh man that’s so awesome, thank you! just what I wanted.

cheers!

[RadModerator]

You’re so welcome Matt!

[Jason PParticipant]

Ditto, exactly what I was looking for too. 🙂

[AmanMember]

Sounds great Jason!

[Evan MParticipant]

This reply has been marked as private.

[KoryKeymaster]

Hey Evan,

Thanks for writing in! As long as your selector works everything should be fine. If the class for you link layer from Revolution Slider is my-revslider-link-class, then you would want to change:

jQuery(function($){
  $('a.x-btn.one-page').click(function(e){
    ...code here...
  });
});

To:

jQuery(function($){
  $('a.my-revslider-link-class').click(function(e){
    ...code here...
  });
});

Thanks!

[Arttu HParticipant]

Hello, the Custom Javascript you first provided on this thread solved my similar problem with one exception:

I’d like to use this “one-page” class for the footer navigation links as well, so that they’d scroll as well. How can I make that happen? Menu settings won’t allow you to add a class to the footer links.

[Arttu HParticipant]

(I obviously changed a.x-btn.one-page to just a.one-page to cover all links on the page with the “one-page” class)

[ChristianModerator]

Hey Artu,

You can add a class to your menu by enabling CSS Classes in the Screen Options in Appearance > Menus (see http://prntscr.com/4900w1). The selector would be different though. It would be .one-page a. With that said, you need to wrap your links with a div or span element with a class of one-page in your content.

Thanks.

[Richard RParticipant]

This reply has been marked as private.

[JadeModerator]

You’re most welcome Richard. 🙂

[Author]

Posts