Как сделать анкор на конкретное место страницы?

Question

[enerjze]

Всем привет, такая проблема, прописал анкоры для одностраничника, но из-за фиксированной панели навигации - не могу четко выставить анкор на начало секции. Т.е Навигация закрывает начало секции, из-за этого анкор получается обрезанным.

Как есть

Как хотелось бы

Пример страницы

Может какой то отдельный div сделать под анкор?

Answer 1

[Softlink]

Именно так. Создается дополнительный элемент с position: absolute у которого top = -1 * высота стикера , и вкладывается в секцию с соответствующим якорем.

https://jsfiddle.net/uay2xz71/

Comments

[enerjze]

Благодарю, выглядит как подходящий вариант для меня

Answer 2

[Pashok Doom]

У вас переброс на анкор идёт скриптами, можно попробовать вычесть из цели высоту шапки

var OnePageNav = function() {
		$(".smoothscroll[href^='#'], #ftco-nav ul li a[href^='#']").on('click', function(e) {
		 	e.preventDefault();

		 	var hash = this.hash,
		 			navToggler = $('.navbar-toggler');
		 	$('html, body').animate({
		    scrollTop: $(hash).offset().top - $('#ftco-navbar').height()
		  }, 700, 'easeInOutExpo', function(){
		    window.location.hash = hash;
		  });


		  if ( navToggler.is(':visible') ) {
		  	navToggler.click();
		  }
		});
		$('body').on('activate.bs.scrollspy', function () {
		  console.log('nice');
		})
	};

Comments

[enerjze]

Если бы знал js так и сделал бы, это куда удобнее чем со стилями возиться. Спасибо за ответ в любом случае