Call to action button

Asked on April 20, 2016 in How To.

I would like to create a “Scroll” button in the introduction section of my site which allows users to click and the page scrolls to the next section of the home page. How would I go about doing this? Would this be a call to action button?

Thanks,

lisaa2999 Layers User
Reply
  • Possible Answers to Your Question:

  • 2 Answer(s)
    Answered on April 21, 2016.

    Hey ,

    i did something like this with a slider button.

    First you have to go to your widget where you want the button to go to.
    for me it was a contend widget under the slider.

    then you click the advanced button and scroll down then you will see widget-ID
    copy this or write it down for me it was #layers-widget-column-5
    copy the # too.

    then go back to the slider or call to action widget , then under insert link for the button.
    select LINK – > Custom then Widget-ID as the link ( #layers-widget-column-5) then button text for example more info.

    then for the smooth scrolling
    if you have devkit you can go to the Javascript section and input this code:

    
    jQuery(function($) {
    $('a[href^="WIDGET-ID"]').live('click',function(event){
    
    event.preventDefault();
    
    var target_offset = $(this.hash).offset() ? $(this.hash).offset().top : 0;
    
    //change this number to create the additional off set
    
    var customoffset = 20;
    
    $('html, body').animate({scrollTop:target_offset - customoffset}, 500);
    
    });
    }(jQuery));
    
    

    IMPORTANT : change the WIDGET-ID to your widget id for me again it was #layers-widget-column-5
    after that press the run button then save and it should work 🙂

    you can play with the customoffset 20 to see what suits you best.

    hope this helped.

    Kind regards
    Dieter

    Reply
    Answered on April 26, 2016.

    I have one on a slider: http://ksmbda.stollerys.co.uk/

    You need to specify a custom link. On your widget, on the far right last button “Advanced”, scroll to the bottom to “CUSTOM ANCHOR” add a value in there.

    On the slider, in the Insert Link, in Link select Custom, add the value you added to “CUSTOM ANCHOR”.

    OR

    Follow the same procedure for a Call to Action widget, setting the link to the “CUSTOM ANCHOR”. You can then place the call to action widget where you want it.

    Reply