Menu
Hi!
I have some issues with my accordions build with elementor.
I want the #tab to scroll to the top of the page (y=0px).
What do I have to change in this code?
` // scroll to
var headerHeight = $(‘#header’).height() // put here your header id to get its height.
$([document.documentElement, document.body]).animate({
scrollTop: $(‘.elementor-tab-title[data-tab=”‘ + current[1] + ‘”]’).closest(‘.elementor-widget-wrap’).offset().top – headerHeight
}, 2000)
This is the code so far:
`add_action( ‘wp_head’, function () { ?>
<script type=”text/javascript”>
jQuery(document).ready(function ($) {
//get the hash tag
//hash exist
setTimeout(function () {
var current = window.location.href
var current = current.split(‘#tab’)
if (current.length > 1) {
showAndScrollToTab($, current)
}
}, 200);
// change the browser url according to selected tab
$(‘.elementor-tab-title[data-tab]’).click(function () {
var current_location = window.location.href;
current_location = current_location.split(‘#’)
window.location = current_location[0] + ‘#tab’ + $(this).attr(‘data-tab’)
})
// activate tab also from anchor link in the same page
$(‘a’).on(‘click’, function () {
var anchorUrl = $(this).attr(‘href’)
var anchor = anchorUrl.split(‘#tab’)
if (anchor.length > 1) {
showAndScrollToTab($, anchor)
}
})
})
function showAndScrollToTab($, current) {
$(‘.elementor-tab-content’).removeClass(‘elementor-active’).css(‘display’,’none’)
$(‘.elementor-tab-content[data-tab=”‘ + current[1] + ‘”]’).addClass(‘elementor-active’).css(‘display’,’block’)
$(‘.elementor-tab-content’).hide();
$(‘.elementor-tab-content[data-tab=”‘+current[1]+'”]’).show();
// scroll to
var headerHeight = $(‘#header’).height() // put here your header id to get its height.
$([document.documentElement, document.body]).animate({
scrollTop: $(‘.elementor-tab-title[data-tab=”‘ + current[1] + ‘”]’).closest(‘.elementor-widget-wrap’).offset().top – headerHeight
}, 2000)
}
</script>
<?php } );
`
Thanks a lot!