Scroll to Anchor link needs position adjusting – HOW

Hi, the following code is in the theme functions-base.js
I have found that this controls the offset from the sticky menu to my page Row anchor link #ID
It is set in the functions-base.js to 150 but I need it to be set to 59

QUESTION: How do I achieve this in the Theme Custom JS section as everything I have tried does not work. Only by adjusting the Core file does it work as I want it to…?
Please advise. Thanks

/**
*——————————————————————————————————————————————-
* One page menu
*——————————————————————————————————————————————-
*/

onePageMenu: function() {

var scrollToRow = function(hash) {
var row = $(‘.vc_row#’ + hash);

if( row.length < 1 ) return;

var position = row.offset().top;

$(‘html, body’).animate({
scrollTop: position – 150 /** I NEED AN OFFSET OF 59 ONLY */
}, 800);

setTimeout(function () {
activeMenuItem(hash);
}, 800);
};

var activeMenuItem = function(hash) {
var itemHash;
$(‘.onepage-link’).each(function() {
itemHash = $(this).find(‘> a’).attr(‘href’).split(‘#’)[1];

if( itemHash == hash ) {
$(‘.onepage-link’).removeClass(‘current-menu-item’);
$(this).addClass(‘current-menu-item’);
}

});
};

$(‘body’).on(‘click’, ‘.onepage-link > a’, function(e) {
var $this = $(this),
hash = $this.attr(‘href’).split(‘#’)[1];

if( $(‘.vc_row#’ + hash).length < 1 ) return;

e.preventDefault();

scrollToRow(hash);

// close mobile menu
$(‘.woodmart-close-side’).trigger(‘click’);
});

if( $(‘.onepage-link’).length > 0 ) {
$(‘.entry-content > .vc_row’).waypoint(function() {
var hash = $(this).attr(‘id’);
activeMenuItem(hash);
}, { offset: 150 });

// $(‘.onepage-link’).removeClass(‘current-menu-item’);

// URL contains hash
var locationHash = window.location.hash.split(‘#’)[1];

if(window.location.hash.length > 1) {
setTimeout(function(){
scrollToRow(locationHash);
}, 500);
}

}
},

Attachments:

You must be logged in to view attached files.

Hi,

Unfortunately, this piece of code can’t be overridden via custom JS section or child theme. The only way to change it is to modify core theme files.

Regards

Hi and thanks for the fast response. Surely the JS can check the height of the sticky header instead of being set in stone? All your theme users must therefore have this issue?

This is not so great when I process ALL theme updates and will need to do this every time.

How do other themes do it? I know that The7 theme calculates it… below:

/*!-scroll to anchor*/
window.clickAnchorLink = function( $a, e ) {
var url = $a.attr( ‘href’ ),
hash = url,
$target = url.substring(3),
base_speed = 600,
speed = base_speed;
if(url.match(“^#!”)){
var $target = url.substring(3);
}else{
var $target = (url.substring(url.indexOf(‘#’))).substring(3);
}

set_sticky_header_height();

if ( typeof $target != ‘undefined’ && $target && $target.length > 0 ) {
location.hash = url;
if($(“#” + $target).length > 0) {
var top = $(“#” + $target).offset().top + 1,
this_offset = $a.offset(),
that_offset = $(“#” + $target).offset(),
offset_diff = Math.abs(that_offset.top – this_offset.top),
speed = 150 * Math.log(offset_diff^2/1000 + 1.02);
$newScrollPosition = top – floatMenuH;
};
if($target == “up”) {
if($body.hasClass(“overlay-navigation”)){
$.closeMobileHeader();
$.closeSideHeader();
$moveBody.stop().animate({
scrollTop: top – floatMenuH
}, speed, ‘swing’);
}else{
$.closeMobileHeader();
$moveBody.stop().animate({
scrollTop: 0
}, speed, ‘swing’,
function() { $.closeSideHeader(); }
);
}
}else {
if($body.hasClass(“overlay-navigation”)){
$.closeMobileHeader();
$.closeSideHeader();
$moveBody.stop().animate({
scrollTop: top – floatMenuH
}, speed, ‘swing’,
function() {
if(window.innerWidth < dtLocal.themeSettings.mobileHeader.firstSwitchPoint && !$body.hasClass(“responsive-off”)){
if(stickyMobileHeader){
if(mobileHeaderDocked){
$newScrollPosition = ( top – $(“.masthead-mobile-header .mobile-header-bar”).height() )
}else{
$newScrollPosition = ( top – $($headerBar, $phantom).height() );
}

$moveBody.stop().animate({
scrollTop: $newScrollPosition
}, 650, ‘swing’);

}
}else{
if(sideHeaderHStrokeExists){
$newScrollPosition = ( top – $(“.sticky-top-line”).height() )

$moveBody.stop().animate({
scrollTop: $newScrollPosition
}, 650, ‘swing’);

}
}

});

Any help is greatly welcomed. Thanks!

I also noticed this thread on your support forum???

https://xtemos.com/forums/topic/javascript-automatic-anchor-scroll-stop-position/#post-73667

How can I get this to work as keeping it in the Custom JS would be soo much simpler??

Currently, there are no other ways to adjust it. We will consider adding some option in the future update.

Ok. thanks for taking it into consideration and happy that it is on a future ‘to look at’ list. Cheers.

Contact us after the update for further instructions. So we keep this topic opened.

Kind Regards

Hello, any updates?

Hello @yanliom,

This topic is outdated. Please, create a new one and post your questions there.

Kind Regards

[Author]

Posts