С перемещением при закрытии при закрытии
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
margin: 5px;
overflow: hidden;
}
.more{
color: blue;
}
</style>
</head>
<body>
<div class="short1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore repellendus labore laudantium necessitatibus dolores! Asperiores officia cumque eveniet quas tenetur molestiae culpa ipsa autem vitae debitis quasi quaerat modi quam cum ex, accusantium assumenda iste vel. Omnis, quod repellendus dolore perspiciatis veniam et neque eos nostrum facilis. Quibusdam, tempora, quae. Asperiores maiores, in molestias sapiente facere magni voluptatum temporibus quos quisquam fuga blanditiis explicabo est modi harum ratione itaque delectus quod, cumque eius nobis iusto quae ipsa impedit, amet consequuntur. Tenetur quae, molestiae, ipsa voluptates laboriosam impedit beatae debitis omnis labore doloribus recusandae magnam similique accusantium consectetur ullam aperiam quaerat aliquid commodi facere, earum id. Fugit similique error illum, cupiditate ratione eveniet cumque porro qui, vero nemo adipisci quo veritatis possimus magni et. Ea laudantium ut ipsum! Cupiditate accusantium eos repudiandae minus saepe dolor adipisci laboriosam cumque earum in voluptatibus quibusdam consequatur eveniet officia commodi mollitia fugiat est dignissimos corrupti quis, vero asperiores iure quo doloribus quia. Iure, fugit provident! Harum minima facilis nostrum eaque nihil ullam dolorum sapiente minus dicta, debitis ad consequuntur temporibus ipsam, explicabo amet, distinctio, velit libero? Ducimus maxime aspernatur perspiciatis veniam dolor natus harum repellendus, hic recusandae aliquam, fugit neque id modi quisquam ipsam molestiae iusto fugiat? Voluptas dolore rerum odio provident dolorem eius obcaecati harum perferendis culpa aliquid rem maxime assumenda iusto ratione qui iure, veritatis sapiente sint quidem recusandae eum, ullam voluptates dignissimos. Enim, quisquam, fugit? Vitae inventore nesciunt reiciendis repellat rerum nostrum, atque voluptatem quo. Vel, sunt numquam consequuntur nobis? Nemo dolorum blanditiis, amet laudantium perspiciatis explicabo fugit qui magni modi dolorem sunt quo provident earum doloribus voluptas, assumenda similique nihil voluptatum tempore at? Impedit quas dolore quos nemo, accusantium ipsum, voluptas hic ut mollitia. Doloremque aspernatur illo magnam reprehenderit fugiat, tempora perspiciatis molestias vel. Maiores, nobis, reiciendis? Qui repellendus ex voluptate ipsa corporis modi hic accusamus eveniet aspernatur esse officia, quos sed dolor est quo perspiciatis delectus nisi placeat, ducimus veritatis omnis dolores quam sunt. Soluta minus ex adipisci ipsum sit! Nostrum aspernatur obcaecati, soluta magnam aliquam incidunt, eligendi cumque tenetur eius ex velit rerum odit, fugit temporibus. Hic, deleniti. Quod magni accusantium doloremque vel, rem ipsam minus deleniti, quisquam, inventore amet iure id quasi delectus nemo, laborum necessitatibus. Maiores, reprehenderit dolores voluptatem, officia explicabo sunt rerum id repellat laudantium, recusandae quam vel placeat et repudiandae adipisci! Nam impedit modi praesentium nisi magni cumque a voluptate aliquam harum, nemo nesciunt qui quae nostrum nihil natus molestiae distinctio quidem quisquam atque. Corporis voluptatum quibusdam exercitationem nihil perferendis iste at, voluptas excepturi reprehenderit iusto blanditiis, assumenda sint, cupiditate. Mollitia minus delectus iure aperiam deserunt quod blanditiis ea, eveniet nisi, aliquam molestiae voluptatibus maiores dolor voluptas velit inventore ad sequi recusandae a officiis excepturi. Dicta praesentium a tempora vero, perferendis eveniet! Cum unde nostrum in animi sunt alias ab velit deserunt, explicabo sit dolorum odio ullam iure illum, aliquid ea fugit amet id voluptas placeat consequatur impedit. Animi corporis vel, voluptates quos facilis doloribus necessitatibus officiis qui, amet voluptas placeat aperiam neque suscipit nam.</div>
<div class="short1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi eligendi rem possimus accusamus eum consectetur corporis optio, omnis vero! Facere voluptatem reiciendis accusamus omnis quisquam esse placeat hic numquam laudantium itaque assumenda unde, libero dignissimos aspernatur quidem! Illum quidem nobis quos, dolorum consectetur! Quae debitis esse earum quasi laborum sapiente delectus maiores, eius saepe quod laboriosam, iusto placeat, inventore aspernatur sit dolores, minima ab nostrum incidunt repellat ipsa impedit! Nulla nesciunt voluptas architecto, corporis ea deleniti quibusdam expedita autem soluta ipsum minima cumque labore quisquam amet molestias voluptatem, eum ut possimus. Doloremque porro, maiores, eum alias sunt dolor eaque ex ipsam architecto tempore dolores officia ea quae neque perferendis, odio dignissimos nemo. Veniam minus, at placeat, consequuntur reiciendis natus accusamus hic maiores aperiam ut nostrum. Ipsum accusamus nostrum dolore eaque doloremque consectetur, quis, est sint laborum molestiae temporibus cum deleniti repellendus harum incidunt inventore, perspiciatis quia libero, beatae et! Voluptatem veniam vel eligendi doloribus consequuntur exercitationem beatae cumque ullam debitis accusamus ab commodi incidunt pariatur voluptates, illum delectus cupiditate! Temporibus doloremque et assumenda totam delectus molestiae, quaerat sit voluptatibus ipsa, hic id modi, veniam omnis sint ab ex dicta! Et ex possimus, nihil eligendi tempora esse reprehenderit error velit, dolor enim ut dicta accusantium. Nulla voluptatum deserunt quidem est. Mollitia laborum iste eum qui eveniet enim nemo vitae molestias, autem praesentium perferendis dolore repellendus sit placeat eligendi est perspiciatis delectus consectetur nihil doloribus nam veritatis! Minima velit expedita quasi consequatur facilis laboriosam officia accusamus eius nulla sapiente sit, totam, omnis impedit quae voluptates debitis iure doloribus repellendus consequuntur reprehenderit eaque saepe! Laboriosam molestias consequatur praesentium quae soluta voluptatum, reprehenderit neque at, alias, sit error cupiditate nemo qui incidunt culpa a. A quas corporis eaque! Eos alias culpa, praesentium odit ipsam blanditiis totam maxime, reiciendis, molestiae dolorum aliquid! At porro eos id consectetur velit sapiente. Quo accusantium, illum nam quos, tenetur dolore quibusdam nulla deleniti, odit quaerat necessitatibus! Nihil, aut. Nemo doloribus cumque consequatur accusamus laboriosam tenetur deleniti aspernatur optio repellendus nisi, dolorem qui laborum fugit inventore distinctio, quos minus rem odit, ullam quia? Dolorum inventore, officia tempore quisquam deleniti. Ab nobis nesciunt fugit quasi aspernatur quidem maxime consequatur earum omnis numquam, ex dignissimos, dicta. Laboriosam laborum est, at necessitatibus. Ipsum dignissimos optio, ratione harum recusandae rerum! A assumenda officia debitis veritatis laborum minus, nisi quia ipsam dolorum, libero perspiciatis accusamus voluptatum voluptatibus labore, sunt, esse necessitatibus sequi asperiores aliquam quos facere suscipit nostrum fugiat. Nostrum laboriosam voluptatibus tempore ducimus illum dolorum necessitatibus provident reprehenderit possimus iure minus nesciunt aspernatur, quibusdam beatae similique, facere ipsa eligendi consequatur quam assumenda eaque rerum amet animi ad id! Enim consequuntur, quaerat suscipit, magnam exercitationem vel aliquam, voluptate illo sapiente neque magni. Non earum rerum provident recusandae quisquam numquam est autem delectus nobis obcaecati impedit ducimus, natus, debitis repellat, enim dolorem reprehenderit distinctio blanditiis fuga ad excepturi. Quidem facilis porro quod molestiae distinctio quibusdam, a fugiat, maiores totam nesciunt asperiores eaque numquam recusandae consectetur error consequatur amet dolores corrupti! Dolor deserunt, repudiandae alias aut nesciunt.</div>
<script>
function short(elt, he, tr){
var hs = he+'px',temp,
elt = document.querySelectorAll(elt);
[].forEach.call(elt, function(el,i){
el.insertAdjacentHTML('afterend', '<div class="more">Подробнее</div>');
el.style.height = hs;
el.style.transition = tr+'s';
el.nextElementSibling.addEventListener('click', function(e){
var prev = this.previousElementSibling;
if (prev.style.height == hs) {
prev.style.height = prev.scrollHeight+'px';
setTimeout(()=>{
prev.style.height = 'auto';
prev.style.transition = '0s';
},tr*1000);
this.textContent = "Свернуть";
this.classList.add('open');
}
else {
anim(prev, tr, temp);
prev.style.height = getComputedStyle(el).height;
prev.style.transition = tr+'s';
setTimeout(()=>prev.style.height = hs,0);
this.textContent ='Подробнее';
this.classList.remove('open');
}
});
});
}
function anim(sel, t, temp) {
cancelAnimationFrame(temp);
var start = performance.now();
var from = window.pageYOffset || document.documentElement.scrollTop,
to = sel.getBoundingClientRect().top;
requestAnimationFrame(function step(timestamp) {
var progress = (timestamp - start) / 350*t;
1 <= progress && (progress = 1);
window.scrollTo(0, from + to * progress | 0);
1 > progress && (temp = requestAnimationFrame(step));
});
}
onload = function(){
short('.short1', 20, 0.4); //класс высота время анимации
};
</script>
</body>
</html>