Go to Top Button

[angelofgod]

Hello, i am trying to add a “go to top” button, but i want it to go to a specific anchor and not to the top. how can i do that? my top of the page is not exacly where my main menu is, i have a slider on the top of the page, the menu is under it, how can i do that my go to top button will go to the main menu ?
Adding a secure note with my website address

[lely]

Hi There,

Thank you for the credentials.
We can use jquery to offset the height of the slider. See this: https://screencast-o-matic.com/watch/cFVTcJoTkE

jQuery(document).ready(function($) {
$('.scrol-top-advanced a').off('touchend click');
  var $body                = $('body');
  var bodyHeight           = $body.outerHeight();
  var adminbarHeight       = $('#wpadminbar').outerHeight();
  var navbarFixedTopHeight = 40;
  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;
  } );

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

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

  $('.scrol-top-advanced a').click(function(e) {
    href        = '#mysticky-wrap';
    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');
      }
    }
  });

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

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


    $(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);

  }

});

Hope this helps.

[angelofgod]

Hi thank you !
but i dont understand how to do it, and i dont realy know what is jquery?
what do i need to do inorder to complete this like you did in the video?
also i dont know how to edit the files when i inspect the page.
all files in edit are empty…
screenshot>> http://prntscr.com/i56z7o

[paul.r]

Hi,

You just need to add the code provided above in Theme Options > JS

Thanks

[angelofgod]

Thanks! it worked!

[thai]

You’re welcome.

[angelofgod]

Hey lely, this works great, but when it goes to top the goto top button remains appeared, any idea if possible to make it “think” he is on top and to cause him to dissapear only at homepage?

[thai]

Hi There,

Please also add this code:

jQuery(function($) {
	$('.scrol-top-advanced a').on('click', function(event) {
		event.preventDefault();
		setTimeout(function(){$('.scrol-top-advanced a').css('display', 'none');}, 1000);
	});
});

Let us know how it goes!

[angelofgod]

Amazing! That just works perfect! much thanks !!!

[thai]

You’re most welcome