Docs

[Nabeel A]

Glad you’ve sorted it out Luis.

Cheers!

[Antoine]

I’ve been told it was possible to use the Smooth Scroll to link to a part of another page by using this code:

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

This code is for a cotent band and I’d like to use it to make a link to an ID. Is it possible? How should the link looks like?

(The code you provided in your previous answer is already installed on my javaschript, but this is not what I want to achieve).

[Paul R]

Hi Antoine,

Yes it is possible, not with the smooth scroll extension but with a custom javascript code that was provided.

You might have been confused by the class name smooth-scroll. It can be change to something else provided you also update the javascript code with your new classname.

eg.

If you have this link

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

You can change the javascript code with this.

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

Notice that I change the class name to scroll-to-position both in the href and javascript code

If you would like to link it to an id, you can change the #x-content-band-1 with your id.

I check your page http://www.paleoflaneur.com/discover-paleo/get-started-today/ and I can see the javascript code is working.

When I click on these three links

The 3 best Meal Plans (including a free 14-day trial)
10 Paleo Books you must have (or at least have read them)
The Pure Paleo Reset (28-day program)

It scrolls down to the intended position.

Can you please clarify what what you intend to achieve.

Thanks

[Author]

Posts