Есть страница. На ней расположены блоки с контентом, по клику на название блока происходит скрол к шапке сайта. Нужно реализовать возврат к тому же блоку( с которого ушли), по клику на кнопку "Back". Подскажите как это реализовать. Проблема в том что блоков много, а кнопка назад одна. Якоря использовать не выходит так как нужно как-то узнавать с какого блока ушли... Буду благодарен за помощь Набросал пример.
$(function() {
$('h2').click(function() {
$('html, body').animate({scrollTop: 0},500);
return false;
})
})
.container {
margin: 0 auto;
max-width: 780px;
}
h2 {
cursor: pointer;
}
h2:hover {
cursor: pointer;
transition: .3s;
opacity: .7;
}
ul li {
list-style-type: none;
padding: 5px;
}
ul {
padding: 5px;
}
ul li:nth-child(odd) {
background: #ccc;
}
header {
display: flex;
justify-content: space-around;
}
h1, .back {
display: flex;
margin: auto;
}
.back {
color: darkslateblue;
font-weight: 600;
cursor: pointer;
}
.back:hover {
transition: .3s;
opacity: .7;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<header>
<H1>Example</H1>
<span class="back">Back ↓</span>
</header>
<ul>
<li>
<h2>Test2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
</li>
<li>
<h2>Test3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
</li>
<li>
<h2>Test4</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
</li>
<li>
<h2>Test5</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
</li>
<li>
<h2>Test6</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
</li>
<li>
<h2>Test7</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
</li>
<li>
<h2>Test8</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
</li>
<li>
<h2>Test9</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
</li>
<li>
<h2>Test10</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
</li>
<li>
<h2>Test11</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
</li>
<li>
<h2>Test12</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
</li>
<li>
<h2>Test12</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
</li>
<li>
<h2>Test12</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
</li>
<li>
<h2>Test12</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquam at autem cum dolor dolorum ea, eos exercitationem fugiat molestiae mollitia obcaecati officiis perferendis placeat quibusdam saepe sed, sit!</p>
</li>
</ul>
<div>
a
) - всё будет достаточно просто. На каждый нажимаемый элемент вашейтеid
, а при клике на него - меняйте аттрибутhref
вашей кнопки в соответствии сid
кликнутого элемента.