Как прокрутить верхнюю часть элемента с отступом?

Question

У нас есть горизонтальное меню перехода, которое будет перемещать кого-либо к вершине тегов <h3 class="heading">, основываясь на элементе меню href.По какой-то причине, когда кто-то нажимает на элемент меню, страница переходит к верхней части элемента <h3>, а не к верхней части элемента (которая включает в себя padding).

Вопрос:

• Как мне перейти к вершине элемента с padding внутри него?

Текущий выпуск:

Желаемые результаты:

Код

• Может также бытьнайдено на codepen.io .

// Shorthand for $( document ).ready()
$(function() {
  $(window).on('scroll', function() {
    $('.menu').addClass('menu--fixed');
  });
 $('.menu li a').on('click', function(evt) {
  var menuHeight = $('.menu').outerHeight(true);
  var elementOffset = ($(this).offset().top) - (menuHeight);
  $('html, body').stop().animate({
    scrollTop: elementOffset
  }, 2000);
  evt.preventDefault();
 });
});

.container {
	max-width: 480px;
}
.heading {
	padding: 32px;
	background-color: #eee;
}
ul {
	list-style: none;
}
.menu {
	position: relative;
	background-color: black;
	color: white;
	width: 100%;
	display: flex;
	justify-between: space-between;
	
}
.menu li {
	display: block;
	height: 100%;
}

.menu a {
	color: white;
	padding: 32px;
}

.menu--fixed {
	position: fixed;
    top: 0;
    left: 0;
    margin-top: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="menu__wrapper">
<ul class="menu">
	<li><a href="#el1">element 1</a></li>
	<li><a href="#el2">element 2</a></li>
	<li><a href="#el3">element 3</a></li>
</ul>
</div>
<div class="wrapper">
	<h3 class="heading" id="el1">Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
	<p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p>Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit amet.</p>


<p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p>Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta del veritas.</p>
</div>

<div class="wrapper">
	<h3 class="heading" id="el2">A Guide to Solving Web Development Problems</h3>
	<p>Epicurus autem, in quibus sequitur Democritum, noil fere labitur, Quam- quam utriusque cum mutta non prolx). turn illiid in priniis, quoJ, cum in rerum nalura duo quaerenda sint, ununi quae materia sit ex qua quaeque res cfficiatur, alterum quae vis sit quae quidque efficiat, de materia disserucrunt, vim et causam efficiendi reliquerunt. Sed lioc commune vitiuni; illae Epicur propriae ruinae: censet enim eadem ilia indlvidua e solida corpora ferri deorsum suo pondere ad lineam i hunc naturalem esse omnium corporum motuni.</p>

<p>Deinde ibidem homo acutus, cam illud occorreret, j omnia deorsum e regione ferrentur et, ut dixi, ad lineam, numquam fore ut atomus altera alteram posset attingere, itaque attulit rem commenticiam.</p>

<p>Declinare dixit atomum perpaulum, quo nihil posset fieri minus; ita eifici complexiones et copulationes et adhaesiones atomorum inter se, ex quo eificeretur mundus omnesque partes mundi quaeque in eo essent. Quae cum res tota fieta sit piieriliter, turn ne efficit quidem^ quod vult. Nam et ipsa declinatio ad libidinem fiiigitur - ait enim deelinare atomum sine causa, quo nibil turpius physico quam fieri.</p>



<p>This is about how to solve technical problems that arise from using front or back end technologies to make web pages or apps but some of these steps will be applicable to solving technical problems in general.</p>

<p>Half the technical problems in development are caused by something trivial but for all the problems past this level, you'll probably need to do some structured thinking.</p>
</div>

<div class="wrapper">
	<h3 class="heading" id="el3">Tempore intellegi convenire</h3>

<p>Qui autem alia matunt scribi a nobis, aequi esse debent, quod et seripta multa sunt, sic ut plura nemini e nostris, et scribentur fortasse plura et tamen qui diligenter haec quae de philosophia Htteris mandamus legere assueverit, iudicabit nulla ad legendum his esse potiora.</p>
<p>Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, facere possimus, omnis dolor repellendus. Qua temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non recusandae pondere ad lineam. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat</p>

</div>
	
</div>

Answer 1

Основная проблема, которую я вижу, состоит в том, что this в вашей функции обработки кликов является элементом ссылки в меню, поэтому получение его смещения для вашего вычисления не имеет отношения к фактическому элементу <h3>, который вы пытаетесь использовать.прокрутите до.

Кроме того, почему бы не всегда сохранять меню фиксированным, если это является желаемым поведением при прокрутке?Изменение его на фиксированное в первом событии прокрутки изменяет макет контейнера и сбрасывает интервал.В моем примере я переместил меню за пределы контейнера и сделал его постоянно исправленным.Затем я добавил отступ в верхнюю часть элемента .container, чтобы он отображался ниже фиксированного меню, когда scrollTop равен 0 (при загрузке страницы).

Затем я использовал атрибут href меню <a> элемент, по которому щелкают, чтобы найти элемент <h3> с тем же идентификатором.Использование фактического смещения элемента <h3> для расчета дает желаемый результат.

Посмотрите мой пример на CodePen: https://codepen.io/bdoughty2018/pen/MLvJOd

Answer 2

В настоящее время существует промежуток между верхней частью страницы и вашим меню.Вам нужно указать свою верхнюю позицию, когда вы используете position: fixed;.Если вы хотите, чтобы меню придерживалось вершины, используйте top: 0px;

. Кроме того, в меню есть поле по умолчанию для полей, так что вам также придется удалить его.

.menu--fixed {
  position: fixed;
  top: 0;
  left: 0;
  margin-top: 0;
}

Должно быть намного проще играть со значениями, чтобы обслужить высоту меню в Javascript после того, как вы это сделали. (Вам также нужно будет удалить margin-bottom для этого).

$(document).ready(function(){
  $(window).on('scroll', function() {
    $('.menu').addClass('menu--fixed');
  });

  $('.menu a').click(function(e){
    e.preventDefault();
    // Get clicked anchor href.
    var anchorID = $(this).attr('href');
    // Get scroll position of the target location.
    var scrollDestination = $(anchorID).offset().top;
    // Cater for menu height
    var finalScroll = scrollDestination - 
$('.menu').outerHeight(true);
    $('html, body').animate({
        scrollTop: finalScroll
    }, 2000);
  });  
});

Редактировать: Javascript.