Как вернуться в верх определенного элемента на странице?

Question

Создал функцию, знаю что .scrollTo(0,0) работает для window, но как применить это к элементу на странице? Подскажите пожалуйста

function returnToTopElement(clickingObjId, element){
	let clickOn = document.getElementById(clickingObjId);
	let topElement = document.getElementById(element);
	clickOn.addEventListener('click', function(){
		topElement.scrollTo(0,0);
	});
};

returnToTopElement("top-button", "elem-b");

.elem-a{
  height: 200px;
  width: 200px;
  background-color: #f6f6f6;
  color: black;
}
.elem-b{
  height: 300px;
  width: 200px;
  background-color: #263B42;
  color: white;
}
.top-button{
  margin-top: 200px;
  cursor: pointer;
}
.top-button:hover{
  background-color: #b2b2b2;
}

<div>  
  <div class="elem-a"> a </div>
  <div class="elem-b" id="elem-b"> 

  b

  <p class="top-button" id="top-button"> Return to the top </p>
  </div>
</div>

Answer 1

const btn = document.querySelector('.btn');
const section = document.querySelector('section');

btn.addEventListener('click', function() {
  window.scrollTo(0, section.offsetTop);
});

body {
  position: relative;
  height: 300vh;
}

section {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100vh;
  background-color: yellow;
}

<div class="btn">click</div>
<section>asd</section>

БЛОГ НА HUSL

Как вернуться в верх определенного элемента на странице?

Ответы (1 шт):