[Todd BParticipant]

Awesome theme. This is my second purchase and I will be purchasing many others…

Here’s the development site I am working on: http://wholesale2.smseafood.com/

I have searched the forum and found things close but haven’t landed on it yet. What I want to do should be fairly simple and from what I have read ready, it involves custom javascript.

I am using revolution slider and the “Enable Scroll Bottom Anchor” in the page settings, however, I’d like the link to take the visitor further down the page so they land in the middle of the content band 2 (on desktop anyway, i know it won’t work exactly that way on tablets and mobile) so they see the text with a little of the images from content bands 1 and 3. I added an anchor id in the text of the second text area (in Content band 2) but don’t know how to put the anchor link into the slider. Can you give me the steps to doing that?

I know I can adjust where i put the anchor id, I just need to know how to link to it.

Thanks a bunch!

[ChristopherModerator]

Hi Todd,
Would you please add the code below into Customizer -> Custom -> JS

 jQuery('.x-slider-revolution-container.below .x-slider-scroll-bottom').click(function(e) {
    e.preventDefault();
    e.stopPropagation();
    jQuery('html, body').animate({
      scrollTop: jQuery('#x-content-band-2').offset().top
    }, 850, 'easeInOutExpo');
  });

Thank you.

[Todd BParticipant]

That doesn’t quite do it. It goes down to the right place but then bounces back up to the original spot. I realized on entering the javascript that i had another javascript snippet that I tried from one of the posts. I have removed that and that may have made the difference.

Please check again and let me know if you have a new snippet.

Thanks.

[CousettMember]

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[Todd BParticipant]

This reply has been marked as private.

[ZeshanMember]

Hi Todd,

Thank you for writing in!

Please remove the older jQuery code and try using the following:

jQuery(document).ready(function($) {
  $('.x-slider-revolution-container.below .x-slider-scroll-bottom').click(function(e) {
    e.preventDefault();
    var $contentBand = $(this).attr('href');
    $('html, body').animate({
      scrollTop: $("#x-content-band-2").offset().top-250
    }, 850, 'easeInOutExpo');
  });
});

Hope this helps. 🙂

Thank you.

[Todd BParticipant]

That works! Thanks.

[ZeshanMember]

You’re welcome Todd 🙂

[cosmoplanParticipant]

Hi,

where i can put this jQuery code in?
I dont found customizer –> Custom –> JS

Thanks in advance

[FriechModerator]

Hi there,

Navigate to Appearance > Customize on the Customizer under the Custom panel you would see a JavaScript box.

If it does not there, please provide your URL and login credentials in private reply.

Cheers!

[Todd BParticipant]

I started this post. However, with the latest update, this script no longer works. Can you take a look and give me new javascript to perform the action requested in the first post? Thanks!

[RadModerator]

Hi Todd,

Please update your script to this 🙂

jQuery(document).ready(function($) {
  $('.x-slider-container.below .x-slider-scroll-bottom').click(function(e) {
    e.preventDefault();
    var $contentBand = $(this).attr('href');
    $('html, body').animate({
      scrollTop: $("#x-content-band-2").offset().top-250
    }, 850, 'easeInOutExpo');
  });
});

Cheers!

[Todd BParticipant]

Thank you so much. Your support is awesome.

[ThaiModerator]

You’re always welcome.

[derrickParticipant]

Hello! I’m trying to do something similar- I have a fixed navigation, and when the scroll button is clicked the section goes up under the navigation. I’m hoping to offset where the button scrolls to by about 90px.

http://germanaccelerator.com

Also, here is some script that I already have in the custom JavaScript window of the theme.

jQuery(function($){

$(window).scroll(function(){

if( $(this).scrollTop() == 0 ) {
$('.x-navbar-fixed-top').removeClass('x-navbar-fixed-top');
}

})

});

/*Smooth Scrolling*/
$('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^//,'') == this.pathname.replace(/^//,'') 
        || location.hostname == this.hostname) {

        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
           if (target.length) {
             $('html,body').animate({
                 scrollTop: target.offset().top
            }, 1000);
            return false;
        }
    }
});

And then here is what I tried to add to the bottom of this just to see if it did anything for me, but I didn’t have any luck with it doing anything different. I was hoping I could just change the “250” in the code below to “90” to get it to offset where I need it, but obviously I don’t know what I’m doing, haha. Thanks for your help.

jQuery(document).ready(function($) {
  $('.x-slider-container.below .x-slider-scroll-bottom').click(function(e) {
    e.preventDefault();
    var $contentBand = $(this).attr('href');
    $('html, body').animate({
      scrollTop: $("#x-content-band-2").offset().top-250
    }, 850, 'easeInOutExpo');
  });
});

[Author]

Posts