Reduce anchor link scroll speed

[blewisb]

I’m looking for a solution to slow the scroll speed of anchor link buttons so that the scroll automation is slower. Please help.

[christopher]

Regretfully this isn’t a feature offered by X. It could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding. Take care!

[blewisb]

I’ve seen similar questions asked about this and support was offered in the form of some jquery to paste in. The reason I can’t reference those topics is because they were in regards to menu anchor links. I tried the suggested code in those threads but wasn’t able to make it work for button anchor links on the page. I’m not looking for custom development - just a snippet of code that I can customize myself that would change the animation time.

[Joao]

Hi There,

Unfortunately that is not possible out of the box. You may consult with a developer.

Thank you for understanding.

[blewisb]

I don’t understand the inconsistent support with X. I’ve seen support techs write entire custom code for questions and some get the cut and paste don’t support that answer. I appreciate the theme and the support that is there but it’s frustrating to see questions get the full treatment and similar questions just get dumped with “Regretfully this isn’t a feature offered…”

[paul.r]

Hi,

We are sorry if feel that way, you can try adding this code in Custom JS

jQuery(document).ready(function($) {
$('a[href*="#"]').off('touchend click');
  var $body                = $('body');
  var bodyHeight           = $body.outerHeight();
  var adminbarHeight       = $('#wpadminbar').outerHeight();
  var navbarFixedTopHeight = $('.x-navbar-fixed-top-active .x-navbar').outerHeight();
  var locHash              = null;
  var dragging             = false;

  var locHashIndex = location.href.indexOf('#');
  if ( -1 !== locHashIndex ) {
    locHash = location.href.substr(locHashIndex).split('/')[0];
  }

  $body.on('touchmove', function() {
      dragging = true;
  } );

  $body.on('touchstart', function() {
      dragging = false;
  } );


  //
  // Calculate the offset height for various elements and remove it from
  // the element's top offset so that fixed elements don't cover it up.
  //

  function animateOffset( element, ms, easing ) {

    if ( ! element ) {
      return;
    }

    try {
      var $el = $(element);
    } catch(error) {
      // abort on invalid selectors. see #610
      return;
    }

    if ( ! $el || 0 == $el.length ) {
      return;
    }

    $('html, body').animate({
      scrollTop: $el.offset().top - adminbarHeight - navbarFixedTopHeight + 1
    }, ms, easing);

  }


  //
  // Page load offset (if necessary).
  //

  $(window).load(function() {
    animateOffset(locHash, 1, 'linear');
  });


  //
  // Scroll trigger.
  //

  $('a[href*="#"]').on('touchend click', function(e) {
    href        = $(this).attr('href');
    notComments = href.indexOf('#comments') === -1;
    if ( href !== '#' && notComments ) {
      var theId = href.split('#').pop();
      var $el   = $('#' + theId);
      if ( $el.length > 0 ) {
        e.preventDefault();

        if (dragging) {
            return;
        }

        animateOffset($el, 1500, 'easeInOutExpo');
      }
    }
  });


  //
  // Initialize scrollspy.
  //

  if ( $body.hasClass('x-one-page-navigation-active') ) {

    $body.scrollspy({
      target : '.x-nav-wrap.desktop',
      offset : adminbarHeight + navbarFixedTopHeight
    });


    //
    // Refresh scrollspy as needed.
    //

    $(window).resize(function() {
      $body.scrollspy('refresh');
    });

    var timesRun = 0;
    var interval = setInterval(function() {
      timesRun += 1;
      var newBodyHeight = $body.outerHeight();
      if ( newBodyHeight !== bodyHeight ) {
        $body.scrollspy('refresh');
      }
      if ( timesRun === 10 ) {
        clearInterval(interval);
      }
    }, 500);

  }

});

You may change 1500 in the code to adjust the speed.

Hope that helps

[blewisb]

Exactly what I was looking for - thank you @paul.r!

[nabeel]

Glad we could help.

Cheers!