Ich habe mir hier eine kleine Routine (Scroller) geschrieben, gibt es tausend mal, ich wollte aber wegen so einer Kleinigkeit nicht jQuery bemühen.
Das funktioniert auch soweit ganz gut, jedoch stört mich der Sprung des Scrollbalkens nach dem Ende der Transition.
Hat einer von Euch eine Idee, wie ich das verhindern kann?
Das funktioniert auch soweit ganz gut, jedoch stört mich der Sprung des Scrollbalkens nach dem Ende der Transition.
Hat einer von Euch eine Idee, wie ich das verhindern kann?
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0px;padding:10px;font-family:"Calibri", sans-serif}
#fhw-scroller svg{
z-index:1000;
position:fixed;
bottom:10px;
right:10px;
cursor:pointer;
margin:0;
padding:0;
display:none;
transition: opacity .5s ease-in-out;
}
.scrolltop{
transition: 1s ease-in-out;
}
</style>
</head>
<body>
<h1>Überschrift</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam, architecto, nihil, eligendi, explicabo deserunt suscipit illum est voluptates neque repellat maiores quo aliquam magni a dolor laborum accusamus minus fuga ab veniam impedit quis minima modi sint perspiciatis ex corporis! Consectetur quaerat incidunt ut in quae. Atque, dolorem autem commodi quibusdam libero aut reprehenderit. Modi perferendis est sapiente alias! Illo quo eaque eius quas architecto dolorum. At, odit, ducimus inventore deleniti consectetur dolorum minima modi enim repellendus voluptatibus dolorem est. Facilis aperiam minima autem non similique quod quaerat laudantium earum vero consequatur. Commodi, odio, exercitationem, voluptatum saepe itaque nemo vero soluta id necessitatibus nam corrupti amet libero aliquid praesentium totam dolor magnam consequuntur quos veritatis repellendus harum reiciendis voluptatibus corporis! Perspiciatis, accusamus voluptatibus perferendis iusto ducimus. Natus, sit, molestias libero odio dolore modi nesciunt dolorum magni veritatis possimus fugit corporis at ducimus sunt repudiandae! Velit, non, tempora, nemo et porro sed sapiente magnam rem recusandae optio eos illo nostrum eius ipsum aliquam cumque quidem nulla dolorum unde debitis deserunt ipsam labore voluptatem aut culpa consequatur hic reprehenderit nam facere sint. Aliquam, perferendis, nobis modi consectetur dignissimos nisi placeat optio aut incidunt fugit eos explicabo rerum molestiae culpa voluptas quaerat laboriosam.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, dignissimos, quam, minima facere nobis earum aliquid nihil eligendi sunt eveniet vel inventore cum esse impedit atque perferendis necessitatibus? Ut nemo accusantium beatae odit mollitia ex cum ipsam sapiente quis sunt! Unde saepe ducimus incidunt rem magnam aliquid iure quae sequi animi laboriosam. Quidem, soluta nemo a blanditiis repellat. Ullam pariatur sit facere quaerat porro quod adipisci dolore neque. Voluptatibus, sequi, voluptatem, nostrum cum eaque inventore illo reprehenderit dolor doloribus ipsam minus consequatur officiis cumque hic autem sunt illum dolores asperiores fugiat incidunt laudantium tempore nesciunt et sapiente nobis dolore ab aut distinctio itaque enim minima perspiciatis impedit quam! Optio, animi, odio, natus in eligendi explicabo nesciunt ratione non provident possimus ipsum amet pariatur deleniti vel impedit molestiae inventore blanditiis obcaecati asperiores eaque fugit voluptatum quod nulla dolores necessitatibus perspiciatis quaerat voluptas. Inventore eaque nemo facilis cupiditate dolor sed temporibus repudiandae architecto qui! Libero, ex, recusandae, provident, quod nihil quos velit est in enim quaerat quis soluta ipsa minima eligendi quasi cum sunt perferendis delectus ullam sed pariatur. Perspiciatis, sit itaque impedit nesciunt id assumenda architecto natus eligendi numquam quis placeat esse cupiditate repellendus dolores quae quaerat ut soluta maxime quam laborum eaque omnis voluptas accusamus nam adipisci inventore officiis magnam unde dolore est? Rerum, delectus perferendis voluptate numquam asperiores quos iste ea nihil perspiciatis reprehenderit quasi eos hic unde temporibus animi eligendi quis fugiat sequi labore fugit dolor tempore minus architecto corrupti facere eveniet adipisci blanditiis esse inventore! Dolor, velit, accusamus veniam a ut voluptatibus expedita officiis facere eum culpa architecto illo optio iste sapiente aperiam. Vero, ratione sit nihil aliquid veritatis? Asperiores, commodi, quam, repellat, magnam doloremque fugiat dignissimos deserunt recusandae vitae impedit officia labore praesentium iure dolore incidunt saepe animi adipisci. Eos, voluptatibus laboriosam quaerat enim asperiores minus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, dignissimos, quam, minima facere nobis earum aliquid nihil eligendi sunt eveniet vel inventore cum esse impedit atque perferendis necessitatibus? Ut nemo accusantium beatae odit mollitia ex cum ipsam sapiente quis sunt! Unde saepe ducimus incidunt rem magnam aliquid iure quae sequi animi laboriosam. Quidem, soluta nemo a blanditiis repellat. Ullam pariatur sit facere quaerat porro quod adipisci dolore neque. Voluptatibus, sequi, voluptatem, nostrum cum eaque inventore illo reprehenderit dolor doloribus ipsam minus consequatur officiis cumque hic autem sunt illum dolores asperiores fugiat incidunt laudantium tempore nesciunt et sapiente nobis dolore ab aut distinctio itaque enim minima perspiciatis impedit quam! Optio, animi, odio, natus in eligendi explicabo nesciunt ratione non provident possimus ipsum amet pariatur deleniti vel impedit molestiae inventore blanditiis obcaecati asperiores eaque fugit voluptatum quod nulla dolores necessitatibus perspiciatis quaerat voluptas. Inventore eaque nemo facilis cupiditate dolor sed temporibus repudiandae architecto qui! Libero, ex, recusandae, provident, quod nihil quos velit est in enim quaerat quis soluta ipsa minima eligendi quasi cum sunt perferendis delectus ullam sed pariatur. Perspiciatis, sit itaque impedit nesciunt id assumenda architecto natus eligendi numquam quis placeat esse cupiditate repellendus dolores quae quaerat ut soluta maxime quam laborum eaque omnis voluptas accusamus nam adipisci inventore officiis magnam unde dolore est? Rerum, delectus perferendis voluptate numquam asperiores quos iste ea nihil perspiciatis reprehenderit quasi eos hic unde temporibus animi eligendi quis fugiat sequi labore fugit dolor tempore minus architecto corrupti facere eveniet adipisci blanditiis esse inventore! Dolor, velit, accusamus veniam a ut voluptatibus expedita officiis facere eum culpa architecto illo optio iste sapiente aperiam. Vero, ratione sit nihil aliquid veritatis? Asperiores, commodi, quam, repellat, magnam doloremque fugiat dignissimos deserunt recusandae vitae impedit officia labore praesentium iure dolore incidunt saepe animi adipisci. Eos, voluptatibus laboriosam quaerat enim asperiores minus.
</p>
<div id="fhw-scroller">
<svg width="50" height="50" viewbox="0 0 100 100" name="scrollUpCirc">
<style type="text/css" >
.hintergrund{fill:#f00;}
.linienfarbe {stroke:#fff;stroke-width:18;stroke-linecap:round;}
</style>
<circle class="hintergrund" cx="50" cy="50" r="50" />
<path class="linienfarbe" d="M50 80 L50 20 M50 20 L80 50 M50 20 L20 50"/>
</svg>
</div>
<script>
var body, fhwScroller;
fhwScroller = document.querySelector("#fhw-scroller svg");
body = document.querySelector("body");
window.onscroll = function() {
if (this.pageYOffset > 300) {
fhwScroller.style.opacity = "0.5";
return fhwScroller.style.display = "block";
} else {
return fhwScroller.style.display = "none";
}
};
fhwScroller.onmouseover = function() {
return fhwScroller.style.opacity = "1";
};
fhwScroller.onmouseout = function() {
return fhwScroller.style.opacity = "0.5";
};
fhwScroller.onclick = function() {
fhwScroller.style.display = "none";
body.classList.add("scrolltop");
return body.style.marginTop = window.pageYOffset + "px";
};
body.addEventListener("transitionend", (function(_this) {
return function(event) {
if (event.target === body) {
body.classList.remove("scrolltop");
body.style.marginTop = "0px";
return window.scrollTo(0, 0);
}
};
})(this));
</script>
</body>
</html>
Kommentar