Smooth scroll from link

[asantebikes]

Hey,

is there a chance to create a smooth scroll from the icon (arrow down on home page sections), to next sections. Right now its just skip to the point. I know there is an extra class option, but the icon does not have it, does it?

[David Martin – Support]

Yes, in the link add the class smooth-scroll-link to the a link.

Ex: <a href="#" class="smooth-scroll-link">click me text</a>

Thanks

[asantebikes]

Yup, solved. But please have a look at: http://www.asantebikes.com/our-bikes/
We have links from the image banners shortcode. Is it possible to apply the smooth scroll from such a link?

[David Martin – Support]

Yes, you will need to copy the entire HTML code and then add the above class. Then paste in the entire code via a Text block in the tab “Text” mode.

Thanks.

[maikol]

Hi,

I’m trying to achieve exactly the same thing, but cannot get it to work with the method you indicated.

The HTML I copied, pasted in a text module and modified looks like this :

[spb_image_banner image="14719" image_size="full" content_pos="center" content_textalign="center" animation="bounceInDown" animation_delay="200" image_link="#choisir_son_hebergeur" el_class="smooth-scroll-link" link_target="_self" width="1/1" el_position="first last"]

[icon image="fa-angle-double-down" character="" size="large" cont="no" float="none" color="#eabe12"]

[/spb_image_banner]

But what this does is add the extra class only to the content element div, which doesn’t appear to work for smooth scroll.

So I guess I did something wrong ?

Thanks,
Maikol

[David Martin – Support]

You need to copy the actual HTML output from the front-end page. You have pasted shortcodes above.

View the page and locate the HTML block the shortcodes generate.

Thanks.

[maikol]

Thanks for your answer !

I tried just that, copying this html code to the text editor in a text module and added the smooth scroll class :

<div class="spb_content_element spb_image_banner col-sm-12"><div class="spb-asset-content"><div class="sf-image-banner "><figure class="animated-overlay"><a class="sf-image-banner-link smooth-scroll-link" href="#intro" target="_self"></a><div class="image-banner-content sf-animation content-center text-center" data-animation="bounceInDown" data-delay="200"><i class="fa-angle-double-down sf-icon sf-icon-float-none sf-icon-large" style="color:#eabe12;"></i></div><div class="img-wrap"><img width="530" height="530" src="http://dev.comment-creer-un-site-internet.net/wp-content/uploads/2014/05/Fondations-brut-1.jpg" class="attachment-full size-full" alt="fondations-brut-1" srcset="http://dev.comment-creer-un-site-internet.net/wp-content/uploads/2014/05/Fondations-brut-1.jpg 530w, http://dev.comment-creer-un-site-internet.net/wp-content/uploads/2014/05/Fondations-brut-1-150x150.jpg 150w, http://dev.comment-creer-un-site-internet.net/wp-content/uploads/2014/05/Fondations-brut-1-300x300.jpg 300w, http://dev.comment-creer-un-site-internet.net/wp-content/uploads/2014/05/Fondations-brut-1-428x428.jpg 428w, http://dev.comment-creer-un-site-internet.net/wp-content/uploads/2014/05/Fondations-brut-1-250x250.jpg 250w" sizes="(max-width: 530px) 100vw, 530px" /></div><figcaption></figcaption></figure></div></div></div>

But this doesn’t work, as the editor somehow removed parts of it when I saved the page. This is what’s left there afterwards :

<div class="spb_content_element spb_image_banner col-sm-12">
<div class="spb-asset-content">
<div class="sf-image-banner "><figure class="animated-overlay">
<div class="image-banner-content sf-animation content-center text-center" data-animation="bounceInDown" data-delay="200"></div>
<div class="img-wrap"><img class="attachment-full size-full" src="http://dev.comment-creer-un-site-internet.net/wp-content/uploads/2014/05/Fondations-brut-1.jpg" sizes="(max-width: 530px) 100vw, 530px" srcset="http://dev.comment-creer-un-site-internet.net/wp-content/uploads/2014/05/Fondations-brut-1.jpg 530w, http://dev.comment-creer-un-site-internet.net/wp-content/uploads/2014/05/Fondations-brut-1-150x150.jpg 150w, http://dev.comment-creer-un-site-internet.net/wp-content/uploads/2014/05/Fondations-brut-1-300x300.jpg 300w, http://dev.comment-creer-un-site-internet.net/wp-content/uploads/2014/05/Fondations-brut-1-428x428.jpg 428w, http://dev.comment-creer-un-site-internet.net/wp-content/uploads/2014/05/Fondations-brut-1-250x250.jpg 250w" alt="fondations-brut-1" width="530" height="530" /></div>
<figcaption></figcaption></figure></div>
</div>
</div>

As you can see the whole link part is just gone !

I’ve tried including the <row> markups and various other combinations, but haven’t had any luck with it.

[David Martin – Support]

Create a test page with jus the image banner, then paste the link here.

When you paste the code back, it should be in “Text” view only, not visual.

Thanks.

[maikol]

here you go : http://dev.comment-creer-un-site-internet.net/test/

Yes I did use the “text only” view in the editor.

Thanks again!

[David Martin – Support]

Hi,

This should do it:

<div class="sf-image-banner "><figure class="animated-overlay"><a class="sf-image-banner-link smooth-scroll-link" href="#intro" target="_self"></a><div class="image-banner-content sf-animation content-center text-center none sf-animate" data-animation="none" data-delay="200" style="margin-bottom: -35px;">
<i class="fa-angle-double-down sf-icon sf-icon-float-none sf-icon-large" style="color:#eabe12;"></i>
</div><div class="img-wrap"><img width="530" height="530" src="http://dev.comment-creer-un-site-internet.net/wp-content/uploads/2014/05/Fondations-brut-1.jpg" class="attachment-full size-full" alt="fondations-brut-1" srcset="http://dev.comment-creer-un-site-internet.net/wp-content/uploads/2014/05/Fondations-brut-1.jpg 530w, http://dev.comment-creer-un-site-internet.net/wp-content/uploads/2014/05/Fondations-brut-1-150x150.jpg 150w, http://dev.comment-creer-un-site-internet.net/wp-content/uploads/2014/05/Fondations-brut-1-300x300.jpg 300w, http://dev.comment-creer-un-site-internet.net/wp-content/uploads/2014/05/Fondations-brut-1-428x428.jpg 428w, http://dev.comment-creer-un-site-internet.net/wp-content/uploads/2014/05/Fondations-brut-1-250x250.jpg 250w" sizes="(max-width: 530px) 100vw, 530px"></div><figcaption></figcaption></figure></div>

If that does not work, please add a login so I can take a closer look.

[maikol]

This reply has been marked as private.

[David Martin – Support]

I have added it to your page now and it’s working. Pasted it into a Raw HTML asset from the page builder.

<div class="sf-image-banner "><figure class="animated-overlay"><a class="sf-image-banner-link smooth-scroll-link" href="#intro" target="_self"></a><div class="image-banner-content sf-animation content-center text-center bounceInDown sf-animate" data-animation="bounceInDown" data-delay="200" style="margin-bottom: -35px;">
<i class="fa-angle-double-down sf-icon sf-icon-float-none sf-icon-large" style="color:#eabe12;"></i>
</div><div class="img-wrap"><img width="530" height="530" src="http://dev.comment-creer-un-site-internet.net/wp-content/uploads/2014/05/Fondations-brut-1.jpg" class="attachment-full size-full" alt="fondations-brut-1" srcset="http://dev.comment-creer-un-site-internet.net/wp-content/uploads/2014/05/Fondations-brut-1.jpg 530w, http://dev.comment-creer-un-site-internet.net/wp-content/uploads/2014/05/Fondations-brut-1-150x150.jpg 150w, http://dev.comment-creer-un-site-internet.net/wp-content/uploads/2014/05/Fondations-brut-1-300x300.jpg 300w, http://dev.comment-creer-un-site-internet.net/wp-content/uploads/2014/05/Fondations-brut-1-428x428.jpg 428w, http://dev.comment-creer-un-site-internet.net/wp-content/uploads/2014/05/Fondations-brut-1-250x250.jpg 250w" sizes="(max-width: 530px) 100vw, 530px"></div><figcaption></figcaption></figure></div>

[maikol]

Excellent, thanks a lot David !

Hadn’t seen that Raw HTML asset.

Cheers
M

[David Martin – Support]

Glad to help you!