Scroll to Section

Hi,

Im making pretty long pages so i want to give my visitors the opportunity to jump to a particular section on the page.
Was looking on the forum for Scroll to Section but did not find a answer.

What im looking for: Some buttons or text links on the page. And when you click them you will scroll automatically down to the particular section. Is this possible with the X theme?

Thanks!

Hello @MattieM,

Thanks for asking. :slight_smile:

  1. You need to to give id to the target section under Customize > Id.
  2. After that you need to create a link element and in the URL add the id along with # symbol that you assigned in previous step.

To help you get started I have recoded a screencast that you can take a look. https://cloudup.com/cfVvJsFvCvC

Thanks.

Hi @Prasant,

Thanks for the reply and video!
I added the id and link. When i go direcly to the Link it works (put direct url in browser), but it doenst work when i click on the link on te page. Any idea how this is possible?

Thanks!

Hi There,

Please try adding the following code under Theme Options > JS:

jQuery(document).ready(function($) {

  var $body                = $('body');
  var bodyHeight           = $body.outerHeight();
  var adminbarHeight       = $('#wpadminbar').outerHeight();
  var navbarFixedTopHeight = $('.x-masthead').outerHeight();
  var locHref              = location.href;
  var locHashIndex         = locHref.indexOf('#');
  var locHash              = locHref.substr(locHashIndex);
  var dragging             = false;
  
  $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 ) {
    $('html, body').animate({
      scrollTop: $(element).offset().top - adminbarHeight - navbarFixedTopHeight + 1
    }, ms, easing);
  }


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

  $(window).load(function() {
    if ( locHashIndex !== -1 && $(locHash).length ) {
      animateOffset(locHash, 1, 'linear');
    }
  });


  //
  // Scroll trigger.
  //

  $('a[href*="#"]').unbind('touchend click').bind('touchend click', function(e) {
      console.log($('.x-masthead').outerHeight());
    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, 850, 'easeInOutExpo');
      }
    }
  });
});

Hope it helps :slight_smile:

Added the code to > Customizer > Custom > JS

Unfortunalty its not working yet.

Hi @MattieM

Please share the exact page URL you are applying this code to so we investigate this issue.

Thanks.

Hi @Alaa,

im trying to implement it on:

Hi Mattie,

I checked your website and you are using an old version of the theme and that is why it is not working for you. Please, backup your website completely and update the theme to version 6.1.6 and the Cornerstone to version 3.1.6.

Then follow the steps Prasant mentioned or check this article to have the one-page navigation feature.

Thank you.

Updated everything and it works, thanks!

You’re welcome. Glad we could help.

Hmm it seems it doesnt work all the time.
I added the ID’s to the buttons on the following page:

But they dont work when i click on them on the live page. When im in the editor or go to the links directly like https://www.cryptotradingacademie.nl/cryptocurrencie/tron-trx/#tron-opslaan it scolls down, but a bit to far. Hope we can fix this :slight_smile:

Hi again,

Please replace the previously given code with the following code as it is triggering an error:

jQuery(document).ready(function($) {

  var $body                = $('body');
  var bodyHeight           = $body.outerHeight();
  var adminbarHeight       = $('#wpadminbar').outerHeight();
  var navbarFixedTopHeight = $('.x-navbar-fixed-top').outerHeight();
  var locHref              = location.href;
  var locHashIndex         = locHref.indexOf('#');
  var locHash              = locHref.substr(locHashIndex);
  var dragging             = false;
  
  $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 ) {
    $('html, body').animate({
      scrollTop: $(element).offset().top - adminbarHeight - navbarFixedTopHeight + 1
    }, ms, easing);
	return false;
  }


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

  $(window).load(function() {
    if ( locHashIndex !== -1 && $(locHash).length ) {
      animateOffset(locHash, 1, 'linear');
    }
  });


  //
  // Scroll trigger.
  //

  $('a[href*="#"]').off('touchend click').on('touchend click', function(e) {
      console.log($('.hm1.x-bar-fixed').outerHeight());
    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, 850, 'xEaseInOutExpo');
		if(!$('.x-nav-wrap-mobile').hasClass('.x-collapsed')) {
			$('.x-btn-navbar').click();
		}
		return false;
      }
    }
  });
});

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

Works now thanks :slight_smile:

Only because of the sticky menu it scrolls just a bit to far. How can i fix this?

Hello There,

The actual height of your header is 55 pixels. Please go to X > Theme Options > Header > Navbar and set the Topbat navbar height to 55 pixels.

Hope this helps.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.