JSFiddle - React, Tailwind, and code Playground

by linmic

HTML

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<button id="scroll-to-trigger">
    scrollTo()
</button>
<button id="jquery-trigger">
    jQuery.animate()
</button>
<div id="container">
    <div id="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in pretium est, vitae pharetra libero. Nulla ut quam sagittis, rhoncus justo nec, lobortis lectus. Fusce ornare est eu ex ullamcorper, vitae porta eros cursus. Nulla pulvinar velit in sapien bibendum, eu lacinia lorem imperdiet. Fusce nec urna eget lacus laoreet ultrices. Fusce et urna ligula. Quisque pretium tincidunt augue, convallis feugiat odio pharetra eu. Nullam iaculis vulputate purus at tincidunt. Curabitur aliquet nulla est, non luctus elit mattis eu. Nam ac sodales sapien, eget scelerisque lacus. Vivamus eu feugiat lectus. Cras ligula sapien, luctus sed metus id, pharetra malesuada mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer faucibus, mi et convallis dictum, elit erat faucibus leo, id accumsan massa nulla sit amet ligula.</p>
        <p>Vivamus condimentum faucibus lectus aliquam lacinia. Cras nec pretium purus, vel tempus ex. Sed hendrerit hendrerit lectus. Praesent rutrum erat orci, at dictum eros sodales quis. In eget accumsan tellus. Maecenas eu tincidunt augue, nec tempus eros. Mauris fringilla in libero sit amet cursus. Vivamus ullamcorper sollicitudin nisi, non dictum urna vulputate sed. Morbi vel quam ut ipsum gravida aliquam eu at mauris. Vestibulum lacinia odio non mauris fermentum, sit amet tincidunt elit ullamcorper. Vestibulum placerat est ut dapibus tincidunt. Integer eget neque eu eros dignissim euismod. Duis rhoncus mauris quis ante mattis bibendum ac eget mauris. Cras porttitor vehicula velit eu faucibus. Vivamus sodales ex quis efficitur commodo. In eget metus blandit, tristique orci vitae, imperdiet nunc.</p>
    <p>Integer non urna ac nisi pretium mollis. Sed odio eros, mattis...

CSS

#container {
    width: 400px;
    height: 300px;
    overflow: scroll;
    border: 1px solid #cccccc;
}

#content {
}

JavaScript

/**
 * Animated scroll element to offset.
 * @param {string} id The id of the element to scroll.
 * @param {integer} offset The pixel offset to scroll to.
 * @param {integer} duration The length of the scroll animation in milliseconds.
 */
function scrollTo(id, offset, duration) {
	//console.log(duration);
    if (duration <= 0) {
    	return;
    }
    
	var el = document.getElementById(id);
	var _offset = offset - el.scrollTop;
    console.log(offset, el.scrollTop);
    var tick = _offset / duration * 5;
    
    
    setTimeout(() => {
    	el.scrollTop += tick;
        
        /*if (el.scrollTop > offset) {
        	return;
        }*/
        
        scrollTo(id, offset, duration - 5);
    }, 5)
}

var testOffset = 400;
var testDuration = 300;

document.getElementById('scroll-to-trigger').addEventListener(
    'click',
    function onClick() {
        scrollTo('container', testOffset, testDuration)
    }
);

document.getElementById('jquery-trigger').addEventListener(
    'click',
    function onClick() {
        $('#container').animate({ scrollTop: testOffset }, testDuration);
    }
);