Ankerpunkt festlegen
Oft verschwindet ein Modul, wenn man es mit einem Anker ansteuert unter dem Topmenu, oder stoppt an einer nicht gewünschten Position. Um das zu vermeiden, setzt man z.B. über einen Text im Textmodul einen „blinden“ Container.
Jedem div muss man eine eigene id zuweisen, das ist dann der Ankerpunkt, und die class ist in unserem Beispiel „sprung“.
So sieht der dazugehörige css-code aus
.sprung {visibility: hidden; height: 0px !important; position: absolute; margin-top: -120px;}Alternativ kann man ein kleines Script in den Headbereich von DIVI oder in die JS-Datei des Child-Themes einfügen.
Achtung nicht vergessen:
Beim Einfügen in den Headbereich von DIVI muss man das Script in ein Script-Tag setzen. In der JS-Datei unbeding ohne Script-Tag, sonst funktioniert es nicht.
//SCRIPT FÜR TOP MARGIN BEI ANKERPUNKTEN
//
//
//
jQuery(function($) {
window.et_pb_smooth_scroll = function( $target, $top_section, speed, easing ) {
var $window_width = $( window ).width();
$menu_offset = -1;
var headerHeight = 100;
if ( $ ('#wpadminbar').length && $window_width <= 980 ) {
$menu_offset += $( '#wpadminbar' ).outerHeight() + headerHeight;
} else {
$menu_offset += headerHeight;
}
//fix sidenav scroll to top
if ( $top_section ) {
$scroll_position = 0;
} else {
$scroll_position = $target.offset().top - $menu_offset;
}
// set swing (animate's scrollTop default) as default value
if( typeof easing === 'undefined' ){
easing = 'swing';
}
$( 'html, body' ).animate( { scrollTop : $scroll_position }, speed, easing );
}
});
