Есть раскрывающиеся списки. Как добавить при клике на данный список отступ от верхнего края 50 пикселей?
<div id="accordion-css3" class="accordion">
<a href="#accordion-1">Заголовок 1</a>
<p id="accordion-1">Здесь находится контент...</p>
<a href="#accordion-2">Заголовок 2</a>
<p id="accordion-2">Здесь находится контент...</p>
<a href="#accordion-3">Заголовок 3</a>
<div id="accordion-3">
<p>Здесь находится контент...</p>
<p>Здесь находится контент...</p>
</div>
h2 {
color: #002850; font-size: 30px; font-weight: normal;
padding: 45px 0 15px;cursor:pointer;
}
.accordion {
border: 1px solid #ddd; border-top: none; margin: 10px 0;
float: left; width: 470px; position: relative;
}
.accordion a {
display: block; text-decoration: none;
}
.accordion h2, .accordion a{
background-color: #fff;
background-image: url(gradient.jpg);
background-image: -moz-linear-gradient(bottom, #f1f1f1, #fff);
background-image: -ms-linear-gradient(bottom, #f1f1f1, #fff);
background-image: -o-linear-gradient(bottom, #f1f1f1, #fff);
background-image: -webkit-linear-gradient(bottom, #f1f1f1, #fff);
background-image: linear-gradient(bottom, #f1f1f1, #fff);
border-top: 1px solid #ddd;
color: #222; font: 14px/30px 'Verdana', sans-serif;
height: 30px; margin: 0; padding: 0; text-indent: 10px;
}
p {
color: #555; font: 12px/18px 'Verdana', sans-serif;
padding: 20px 10px;
}
a[href^="#accordion"] + *{display: none;}
#accordion-css3 :target{display: block;}
Я пытался решить проблему более глобально прописав всем ссылкам на сайте отступ от верхнего края, но что-то пошло не так. Помогите разобраться
const anchors = document.querySelectorAll('a[href*="#"]');
for( let anchor of anchors) {
anchor.addEventListener("click", function(e){
e.preventDefault();
const blockID = anchor.getAttribute('href')
const fixedHeaderHeight = 40;
const top = document.querySelector('' + blockID).offsetTop - fixedHeaderHeight;
window.scrollTo({
top,
left: 0,
behavior: "smooth",
})
})
}
