Docs

[Antoine]

Hi,

I installed and activated the smooth scroll extension but I don’t know how to use it. Could you please tell me how to do it? Do I need to add some code to the background image or the content-band? I have really no idea and could not find the information anywhere.

Thanks.

[Paul R]

Hi Antoine,

Please refer to the links below.

Extension: Smooth Scroll

Smooth scroll demo

http://theme.co/x/demo/extensions/smooth-scroll/

Thanks

[Antoine]

I’m sorry, but I’ve seen those pages already (I spend almost 1 hour trying to find how to do it). I really don’t understand and there must be something I am missing completely. The 2 pages you showed me do not explain how to use Smooth Scroll but simply show the result (demo) and how to install and activate it (member area)

I am not a programmer and it might explain why I don’t understand it (sorry about this).

Could you please help me a bit more?

Thanks.

[Darshana]

Hi there,

Sorry for the confusion. Please refer to the following post (https://theme.co/x/member/forums/topic/smooth-scrolling-up-and-down-via-an-image-click/#post-125681).

If you need further assistance, please provide us with a URL to your page.

Thanks!

[Antoine]

Thank you for the instruction. I’ve done everything but it’s not working yet. I guess I am still doing something wrong with the code which I use:

[content_band class="center-text x-img center-block x-img-link x-img-none smooth-scroll" no_margin="true" inner_container="false" href="#x-content-band-4" data-options="thumbnail: 'http://www.paleoflaneur.com/wp-content/uploads/2015/05/Paleo-Food-Nutrition.jpg'" bg_image="http://www.paleoflaneur.com/wp-content/uploads/2015/05/Paleo-Food-Nutrition.jpg"]
[container class="mvl pvl"]

Text Here

[/container][/content_band]

Could you Please tell me what to change to make it work.

URL: http://www.paleoflaneur.com/

[Paul R]

Hi Antoine,

The code is for links that if click on will scroll to specific location on a page.

The smooth scroll extension if enabled will help you control the speed of your mouse wheel when scrolling up and down
on your site.

You can change the speed under addons > smooth scroll

http://screencast.com/t/ux8EFeDO

The main purpose of that extension is to make your parallax images look good when scrolling.

If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots).

Thanks

[Antoine]

What I’d like to get is exactly what you have on the demo page of the extension:
http://theme.co/x/demo/extensions/smooth-scroll/

The effect on the background image (URL: http://www.paleoflaneur.com/):

This is probably different to what you explained with the “links that if click on will scroll to specific location on a page.” (I would also be happy if you could explain me this a bit better as it could be really useful)

Thanks,
Antoine

[Paul R]

Hi Antoine,

You need to enable parallax to your content band.

http://screencast.com/t/VUehWvLktNrZ

For more information please refer to the links below.

Shortcode Walkthrough: [content_band]

http://theme.co/x/demo/integrity/1/shortcodes/content-band/

Hope that helps.

[Antoine]

Thanks, it’s now working.

Could you please explain me how I could use the “links that if click on will scroll to specific location on a page.”. I did not really undersant this part yet and it could be really useful to be able to use it.

[Antoine]

I forgot to mention a problem:

I’ve got some pages which are imported from the Demo. Those pages do not work with the Visual Compozer. It means that I need to code to the code to be able to do some changes. (If I try to use Visual Composer, it will complety destroy the page and it doesn’t look at all as it should).

Is there an easy way to make them work with Visual Composer? Or is the only solution to build the page again from scratch in Visual Composer?

[Paul R]

Hi Antoine,

Please make sure you have selected visual composer markup when you import your demo.

Please see – http://screencast.com/t/dsEXOYurGj

With regards to anchor links, add the code below in your custom > javascript box in the customizer.

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

Then add the class smooth-scroll to any of your anchor links to have it scroll smoothly to a specific location in your page.

eg.

<a class="smooth-scroll" href="#x-content-band-1">Test link</a>

That link if clicked on will scroll to the first content band(#x-content-band-1) of the page you are currently on.

Hope that helps.

[Antoine]

Thanks for your help. I now understand whey Visual Composer is not working 🙂
This is not a bid problem, I will simply build it from scratch for the pages I really need to keep.

As for the anchor links, it is really good to know and I will for sure use it.

Thanks again!

[Antoine]

One question though regarding the anchor links. Is it possible to use to to link to a content band on another page? What would then the code looks like?

[Paul R]

Hi Antoine,

Yes, that’s possible.

To make it work you need to use absolute url in your links.

eg. linking to first content band on about page (http://www.yoursite.com/about/#x-content-band-1)

<a class="smooth-scroll" href="http://www.yoursite.com/about/#x-content-band-1">Test link</a>

Hope that helps.

[Antoine]

Good to hear that linking to another page is possible with Smooth Scroll. I’ve got 2 more questions:

#1. How do I find out which is the number of the content band? (ie. #x-content-band-1)
#2. Can I link to something different that a content band? An image, an heading, …

Thanks.

[Author]

Posts