Update for public https://habr.com/post/421887/
This commit is contained in:
18
myapp/static/components/backtotop.css
Normal file
18
myapp/static/components/backtotop.css
Normal file
@@ -0,0 +1,18 @@
|
||||
.scrollToTop{
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
position: fixed;
|
||||
bottom: 10px;
|
||||
left: 10px;
|
||||
opacity: 0.3;
|
||||
display: inline;
|
||||
}
|
||||
.scrollToTop:hover{
|
||||
text-decoration: none;
|
||||
opacity: 1.0;
|
||||
}
|
||||
.scrollToTop .card{
|
||||
margin-bottom: 0;
|
||||
border-color: #7ca8b1;
|
||||
}
|
||||
53
myapp/static/components/backtotop.js
Normal file
53
myapp/static/components/backtotop.js
Normal file
@@ -0,0 +1,53 @@
|
||||
var backtotopTemplate = `
|
||||
<div>
|
||||
<span class="scrollToTop" style="z-index: 10;" v-show="visible" v-on:click="backToTop">
|
||||
<div class="card">
|
||||
<div class="card-body py-2 px-2">
|
||||
<i class="fa fa-chevron-up"></i>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
</div>`;
|
||||
|
||||
Vue.component('backtotop-component', {
|
||||
props: {
|
||||
visibleoffset: {
|
||||
type: [String, Number],
|
||||
default: 600
|
||||
},
|
||||
},
|
||||
template: backtotopTemplate,
|
||||
data () {
|
||||
return {
|
||||
visible: false
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
var vm = this;
|
||||
window.addEventListener('scroll', this.catchScroll);
|
||||
let currentScroll = document.documentElement.scrollTop || document.body.scrollTop
|
||||
vm.visible = (currentScroll > 100);
|
||||
},
|
||||
destroyed () {
|
||||
window.removeEventListener('scroll', this.catchScroll)
|
||||
},
|
||||
methods: {
|
||||
catchScroll () {
|
||||
var vm = this;
|
||||
vm.visible = (window.pageYOffset > 100);
|
||||
},
|
||||
backToTop () {
|
||||
var vm = this;
|
||||
vm.scrollAnimate();
|
||||
},
|
||||
scrollAnimate: function() {
|
||||
var vm = this;
|
||||
let currentScroll = document.documentElement.scrollTop || document.body.scrollTop
|
||||
if (currentScroll > 0) {
|
||||
//alert(currentScroll);
|
||||
window.requestAnimationFrame(vm.scrollAnimate)
|
||||
window.scrollTo(0, Math.floor(currentScroll - (currentScroll / 5)))
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user