[Timothy HParticipant]

Below is a description of an issue I am having with anchor links and smooth scrolling – neither of which are working for me.

Here’s a 5 minute screen capture movie, ‘so you can see first hand what I am doing..

______________________________

I am using the latest version of the X-theme (downloaded and installed on May 21st, 2014).
I have inserted the following code (as per your recommendations in the forum)..

————————–
To enable smooth scrolling
when linking sub-navigation menu
items via anchors.
————————–

jQuery(function($){
$(‘.x-navbar .sub-menu a’).click(function(e){
e.preventDefault();

$(‘html,body’).animate({
scrollTop: $(‘#’ + $(this).attr(‘href’).split(“#”).slice(-1)[0] ).offset().top – $(‘.x-navbar’).height()
},700 ,’swing’);
});
});

—————————
AND
for the Revolution Slider
—————————

jQuery(function($){
$(‘a.x-btn’).click(function(e){
e.preventDefault();

$(‘html,body’).animate({
scrollTop: $(‘#’ + $(this).attr(‘href’).split(“#”).slice(-1)[0] ).offset().top – $(‘.x-navbar’).height()
},700 ,’swing’);
});
});

————————–

I am using Visual composer to build (what will eventually become) my home page.
And I created a simple nav menu ‘with a single navigation Link of “#tim-test”.
Where I added “id=tim-test” to the final row; thus..

[vc_row id=”tim-test”][vc_column width=”1/1″][text_output]
This is a test row
[/text_output][/vc_column][/vc_row]

When I click the nav link however – nothing happens.

I also have a Revolution slider with a custom button – and it links to another (id=”tim-pagetop”) ‘which I manually inserted into the “x-child-integrity-light” child theme’s “/wp-content/themes/x-child-integrity-light/framework/views/integrity/wp-header.php” file; thus..

<header id=”tim-pagetop” class=”<?php x_masthead_class(); ?>” role=”banner”>

That one goes to the anchor when the button is clicked, but there’s no smooth scrolling.

My aim is to use anchor links extensively in the single-page-navigation menu for this page, and also to use the custom Revolution Slider button – and I need both to not only work, but to also use smooth scrolling.

What am I doing wrong?

[RadModerator]

Hi Timothy,

Thank you for writing in!

Watched the video, and never saw or maybe I just overlook the part where you should setup your one page navigation.

http://awesomescreenshot.com/0422unjv55

Also, you will not find #x-content-band-1 … #x-content-band-{n} at your editor as these were automatic ID generated by the shortcode. Each content band/rows represent each ID, top row always the 1st thus #x-content-band-1 . You could use your own ID, but it must be an element inside your content band/row.

Thank you.

[Timothy HParticipant]

You are correct, in that I did not actually show in the video that I had set the page to use one page navigation; however I did state that I had in the first few seconds of the video. Sorry, I should have shown it – my bad. 🙂

So, with one page navigation set on the page, and with my own ID element set inside the content band/row..

[vc_row id=”tim-test”][vc_column width=”1/1″][text_output]
This is a test row
[/text_output][/vc_column][/vc_row]

It is still not scrolling.
In fact, it is not linking either.

[RadModerator]

Hi there,

As mentioned above, you can’t add ID in content band row. Should be like this :

[vc_row][vc_column width="1/1" id="tim-test"][text_output]
This is a test row
[/text_output][/vc_column][/vc_row]

Hope this helps.

[Nilesh LParticipant]

What would make the sliding smooth like ethos demo number 2. I can get it to slide but the sliding is abrupt not smooth.

[ChristianModerator]

Hey Nilesh,

Please see my reply at with your query at http://theme.co/x/member/forums/topic/how-to-accomplish-smooth-scroll-like-in-httptheme-coxdemoethos2/#post-71134

Thanks.

[Author]

Posts