Tahák k tvorbě webů

jQuery

Odkaz na kotvu a fixní menu

Pokud mám na stránce fixní horní menu, tak se může stát, že odkaz vedoucí na #kotvu nefunguje správně. Resp. cílový prvek je překrytý fixním menu. Při použití tohoto skriptu se cíl, kam se po kliknutí na odkaz odscrolluje, posouvá o výšku tohoto menu.

	// kliknuti na odkaz
	jQuery('body').on('click', '.scroll a', function(e) {
		e.preventDefault();
		var href = jQuery(this).attr("href");
		res = href.split('#');

		if (res[0] == window.location.href.split('#')[0]) {
			var offset = jQuery('.sticky-menu .main-nav').height() + (jQuery('#wpadminbar').height() || 0);

			jQuery('html,body').animate({
				scrollTop: jQuery('#' + res[1]).offset().top - offset - 20
			},'fast');	    	
		}

		else {
			window.location.href = href;
		}
	});

	// prichod z jine stranky
	jQuery(function() {
		res = window.location.href.split('#');
		if (res.length == 2) {
			var offset = jQuery('.sticky-menu .main-nav').height() + (jQuery('#wpadminbar').height() || 0);

			jQuery(window).scrollTop(jQuery('#' + res[1]).offset().top - offset - 68);
		}
	});
  • Odkaz s kotvou musí mít class "scroll"
  • Offset se vypočítá na základě výšky ".sticky-menu" a případně administrační lišty WordPress
  • K offsetu se přidává 20px, aby to vypadalo hezky
  • Scrollování je animované
  • Opravuje také scrollování při příchodu z jiné stránky