Answer the question
In order to leave comments, you need to log in
Smooth scrolling with tween.js?
Hello.
There is a page on which a container with a scroll, you need to make a smooth scroll to the specified coordinates when you click on the button. To do this, I used tween.js on objects, but for some reason it does not work on the document element.
How to make smooth scrolling using this or any other library?
<template>
<div class="about">
<div class="nav">
<button @click="scroll">Scroll</button>
</div>
<div id="wrapper">
<div id="container" class="info">
</div>
</div>
</div>
</template>
<script>
import {Easing, Tween, autoPlay} from 'es6-tween'
autoPlay(true)
export default {
methods: {
scroll() {
const el = document.getElementById('wrapper')
new Tween(el)
.to({left: 1500, top: 1500}, 2000)
.easing(Easing.Linear.None)
.start()
}
}
}
</script>
<style>
.nav {
position: absolute;
height: 50px;
background: #1b4b72;
width: 100%;
}
#wrapper {
position: absolute;
top: 50px;
bottom: 0;
left: 100px;
right: 0;
overflow: auto;
width: 1000px;
}
#container {
position: absolute;
left: 0;
width: 2000px;
height: 2000px;
background: #e2f0fb;
}
#container.info {
padding: 50px;
}
</style>
Answer the question
In order to leave comments, you need to log in
The following code works for me (smooth only where there is support for scroll behavior, and figs with it) https://gist.github.com/FragsterAt/b72632976cac00f...
Well, CSS is also
registered for html, body, etc. .d. scroll-behavior: smooth;
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question