Scroll up/down with pure javascript

Question

I've always used jQuery for animations but this time I can't use it, so I need some help with vanilla javascript where I suck.

Description: I have a div with limited height and vertical scrollbar. On the top and on the bottom I have buttons for scrolling content up/down inside this div. Buttons have fixed top/bottom position.

So, if I click top button, I want content inside this div to slide down. And when clicking on bottom buttom, I want content to slide up.

Perfect scenario would be if I hold mouse button (or finger on touch devices) on button, scrolling should continue. If I only click once/tap, I would like to have an option to set amount of scrolling (in px, maybe as a parameter in a function).

This is my HTML:

<div id="header">
  <input class="uk-button uk-button-primary" id="down" type="button" value="Scroll down">
</div>
<div id="content">
  <div id="inner">
    <p>Here comes a very long text</p>
  </div>
</div>
<div id="footer">
  <input class="uk-button uk-button-primary" id="up" type="button" value="Scroll up">
</div>

I've created an example (without javascript): https://jsfiddle.net/esedic/L0u4a2d0/

Answer 1

check this fiddle: https://jsfiddle.net/9257p50r/2/

 var scrollDown,scrollUp; var contentEle = document.getElementById('content'); var downBtn = document.getElementById('down'); var upBtn = document.getElementById('up'); downBtn.addEventListener("mousedown", function(){ scrollDown = setInterval(function(){ contentEle.scrollTop += 20; },100) }); upBtn.addEventListener("mousedown", function(){ scrollUp = setInterval(function(){ contentEle.scrollTop -= 20; },100) }); downBtn.addEventListener("mouseup", function(){ clearInterval(scrollDown); }); upBtn.addEventListener("mouseup", function(){ clearInterval(scrollUp); }); /* mobile touch */ downBtn.addEventListener("touchstart", function(){ scrollDown = setInterval(function(){ contentEle.scrollTop += 20; },100) }, false); downBtn.addEventListener("touchend", function(){ clearInterval(scrollDown); }, false); upBtn.addEventListener("touchstart", function(){ scrollUp = setInterval(function(){ contentEle.scrollTop -= 20; },100) }, false); upBtn.addEventListener("touchend", function(){ clearInterval(scrollUp); }, false); 

 body { padding: 1em; margin-top: 2.5em; } #header { position: fixed; top: 1em; left: 1em; } #footer { position: fixed; bottom: 1em; left: 1em; } #content { max-height: 570px; overflow: hidden; overflow-y: scroll; -webkit-overflow-scrolling: touch; } 

 <div id="header"> <input class="uk-button uk-button-primary" id="down" type="button" value="Scroll down"> </div> <div id="content"> <div id="inner"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id nunc a diam laoreet porttitor quis id tellus. Nulla facilisi. Nam molestie sapien ac eros sollicitudin volutpat. Duis id malesuada velit. Donec tristique orci quis ante viverra fermentum. In hac habitasse platea dictumst. Donec ut hendrerit enim. In semper enim enim, et dignissim sapien placerat eu. Mauris ac sapien a enim euismod tincidunt in non justo. Vivamus tincidunt placerat mauris, sit amet scelerisque nisl varius nec. Sed commodo pharetra dolor a feugiat. Pellentesque enim risus, condimentum nec nisi a, vehicula feugiat elit. Phasellus vulputate diam eu sagittis suscipit. Curabitur tempor posuere nibh non congue.</p> <p>Praesent eget tortor dapibus, scelerisque nisl ut, lobortis neque. Ut vel ex id nibh pretium commodo sed id odio. Mauris vulputate justo id facilisis ornare. Nullam efficitur orci leo. Donec laoreet vehicula justo, sed sollicitudin dolor. Quisque at mattis enim. Quisque at eleifend lorem. Curabitur non ex id mi eleifend sagittis vel quis mauris. Nulla mattis tellus arcu, vitae gravida neque condimentum a. Nulla faucibus pulvinar risus in consectetur. Nunc tristique tincidunt velit, a gravida erat egestas nec. Mauris interdum ultrices risus vel hendrerit. Fusce sed odio erat. Proin ac ornare purus. Donec laoreet luctus maximus.</p> <p>Sed id erat ut leo auctor molestie id a lectus. Fusce orci nibh, euismod at risus vitae, laoreet rhoncus purus. Ut hendrerit mollis tempor. Quisque ullamcorper in est dignissim accumsan. Fusce maximus purus porta lorem aliquet pretium. Mauris nec egestas nisl. Proin venenatis sem et arcu imperdiet, at interdum mauris varius. Vestibulum metus justo, euismod ac ipsum quis, blandit venenatis lectus. Sed non vehicula ligula.</p> <p>Nunc in lorem egestas, gravida neque a, iaculis massa. Vestibulum porttitor sed nibh eget auctor. Aliquam dictum posuere diam, et elementum justo consequat sed. Morbi eu suscipit quam. Phasellus fringilla non mi ac volutpat. Proin in massa tellus. Curabitur rhoncus ultrices est, vitae mollis purus commodo vitae. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc sagittis felis risus, in dictum nibh tincidunt quis. Curabitur in neque blandit, consequat quam et, pellentesque orci. Vivamus risus sem, finibus convallis diam vel, ornare blandit lacus. Vestibulum molestie purus quis rutrum egestas.</p> <p>Sed non mi sed odio dictum feugiat id ac dui. Sed magna justo, molestie vel sapien sed, finibus finibus tortor. Maecenas dapibus nisi justo, id sollicitudin ipsum suscipit aliquam. Pellentesque bibendum dui urna, fermentum sodales urna placerat fringilla. Curabitur et suscipit ligula. Nunc feugiat tortor vel rhoncus rutrum. Integer vitae ex vitae est porttitor semper tincidunt at turpis. Nullam bibendum accumsan maximus. Donec tincidunt sit amet sem non sollicitudin. Sed accumsan, ex vitae consectetur tempor, elit mi scelerisque sem, eu iaculis nunc purus ac diam. Maecenas tempor quam lectus, vitae rutrum velit ultricies eu. Integer maximus turpis a pulvinar maximus. Donec ultrices nulla et malesuada commodo.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id nunc a diam laoreet porttitor quis id tellus. Nulla facilisi. Nam molestie sapien ac eros sollicitudin volutpat. Duis id malesuada velit. Donec tristique orci quis ante viverra fermentum. In hac habitasse platea dictumst. Donec ut hendrerit enim. In semper enim enim, et dignissim sapien placerat eu. Mauris ac sapien a enim euismod tincidunt in non justo. Vivamus tincidunt placerat mauris, sit amet scelerisque nisl varius nec. Sed commodo pharetra dolor a feugiat. Pellentesque enim risus, condimentum nec nisi a, vehicula feugiat elit. Phasellus vulputate diam eu sagittis suscipit. Curabitur tempor posuere nibh non congue.</p> <p>Praesent eget tortor dapibus, scelerisque nisl ut, lobortis neque. Ut vel ex id nibh pretium commodo sed id odio. Mauris vulputate justo id facilisis ornare. Nullam efficitur orci leo. Donec laoreet vehicula justo, sed sollicitudin dolor. Quisque at mattis enim. Quisque at eleifend lorem. Curabitur non ex id mi eleifend sagittis vel quis mauris. Nulla mattis tellus arcu, vitae gravida neque condimentum a. Nulla faucibus pulvinar risus in consectetur. Nunc tristique tincidunt velit, a gravida erat egestas nec. Mauris interdum ultrices risus vel hendrerit. Fusce sed odio erat. Proin ac ornare purus. Donec laoreet luctus maximus.</p> <p>Sed id erat ut leo auctor molestie id a lectus. Fusce orci nibh, euismod at risus vitae, laoreet rhoncus purus. Ut hendrerit mollis tempor. Quisque ullamcorper in est dignissim accumsan. Fusce maximus purus porta lorem aliquet pretium. Mauris nec egestas nisl. Proin venenatis sem et arcu imperdiet, at interdum mauris varius. Vestibulum metus justo, euismod ac ipsum quis, blandit venenatis lectus. Sed non vehicula ligula.</p> <p>Nunc in lorem egestas, gravida neque a, iaculis massa. Vestibulum porttitor sed nibh eget auctor. Aliquam dictum posuere diam, et elementum justo consequat sed. Morbi eu suscipit quam. Phasellus fringilla non mi ac volutpat. Proin in massa tellus. Curabitur rhoncus ultrices est, vitae mollis purus commodo vitae. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc sagittis felis risus, in dictum nibh tincidunt quis. Curabitur in neque blandit, consequat quam et, pellentesque orci. Vivamus risus sem, finibus convallis diam vel, ornare blandit lacus. Vestibulum molestie purus quis rutrum egestas.</p> <p>Sed non mi sed odio dictum feugiat id ac dui. Sed magna justo, molestie vel sapien sed, finibus finibus tortor. Maecenas dapibus nisi justo, id sollicitudin ipsum suscipit aliquam. Pellentesque bibendum dui urna, fermentum sodales urna placerat fringilla. Curabitur et suscipit ligula. Nunc feugiat tortor vel rhoncus rutrum. Integer vitae ex vitae est porttitor semper tincidunt at turpis. Nullam bibendum accumsan maximus. Donec tincidunt sit amet sem non sollicitudin. Sed accumsan, ex vitae consectetur tempor, elit mi scelerisque sem, eu iaculis nunc purus ac diam. Maecenas tempor quam lectus, vitae rutrum velit ultricies eu. Integer maximus turpis a pulvinar maximus. Donec ultrices nulla et malesuada commodo.</p> </div> </div> <div id="footer"> <input class="uk-button uk-button-primary" id="up" type="button" value="Scroll up"> </div> 

Answer 2

Use jQuery:

var scrolled = 0;

$(document).ready(function() {
    $("#downClick").on("click" ,function() {
        scrolled = scrolled + 900;

        $(".cover").animate({
                        scrollTop:  scrolled
                    });
    });

    $("#upClick").on("click" ,function() {
        scrolled = scrolled - 300;

        $(".cover").animate({
                        scrollTop:  scrolled
                   });
    });

    $(".clearValue").on("click" ,function() {
        scrolled = 0;
    });
});

http://jsfiddle.net/xEFq5/10/

Answer 3

Use addEventListener

 var down = document.querySelector("#down"), up = document.querySelector("#up"), content = document.querySelector("#content"); function scrollDown(){content.scrollTop = content.scrollHeight} function scrollUp(){content.scrollTop = 0} down.addEventListener("click",scrollDown,false); up.addEventListener("click",scrollUp,false); 

 body { padding: 1em; margin-top: 2.5em; } #header { position: fixed; top: 1em; left: 1em; } #footer { position: fixed; bottom: 1em; left: 1em; } #content { max-height: 570px; overflow: hidden; overflow-y: scroll; -webkit-overflow-scrolling: touch; } #inner { } 

 <div id="header"> <input class="uk-button uk-button-primary" id="down" type="button" value="Scroll down"> </div> <div id="content"> <div id="inner"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id nunc a diam laoreet porttitor quis id tellus. Nulla facilisi. Nam molestie sapien ac eros sollicitudin volutpat. Duis id malesuada velit. Donec tristique orci quis ante viverra fermentum. In hac habitasse platea dictumst. Donec ut hendrerit enim. In semper enim enim, et dignissim sapien placerat eu. Mauris ac sapien a enim euismod tincidunt in non justo. Vivamus tincidunt placerat mauris, sit amet scelerisque nisl varius nec. Sed commodo pharetra dolor a feugiat. Pellentesque enim risus, condimentum nec nisi a, vehicula feugiat elit. Phasellus vulputate diam eu sagittis suscipit. Curabitur tempor posuere nibh non congue.</p> <p>Praesent eget tortor dapibus, scelerisque nisl ut, lobortis neque. Ut vel ex id nibh pretium commodo sed id odio. Mauris vulputate justo id facilisis ornare. Nullam efficitur orci leo. Donec laoreet vehicula justo, sed sollicitudin dolor. Quisque at mattis enim. Quisque at eleifend lorem. Curabitur non ex id mi eleifend sagittis vel quis mauris. Nulla mattis tellus arcu, vitae gravida neque condimentum a. Nulla faucibus pulvinar risus in consectetur. Nunc tristique tincidunt velit, a gravida erat egestas nec. Mauris interdum ultrices risus vel hendrerit. Fusce sed odio erat. Proin ac ornare purus. Donec laoreet luctus maximus.</p> <p>Sed id erat ut leo auctor molestie id a lectus. Fusce orci nibh, euismod at risus vitae, laoreet rhoncus purus. Ut hendrerit mollis tempor. Quisque ullamcorper in est dignissim accumsan. Fusce maximus purus porta lorem aliquet pretium. Mauris nec egestas nisl. Proin venenatis sem et arcu imperdiet, at interdum mauris varius. Vestibulum metus justo, euismod ac ipsum quis, blandit venenatis lectus. Sed non vehicula ligula.</p> <p>Nunc in lorem egestas, gravida neque a, iaculis massa. Vestibulum porttitor sed nibh eget auctor. Aliquam dictum posuere diam, et elementum justo consequat sed. Morbi eu suscipit quam. Phasellus fringilla non mi ac volutpat. Proin in massa tellus. Curabitur rhoncus ultrices est, vitae mollis purus commodo vitae. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc sagittis felis risus, in dictum nibh tincidunt quis. Curabitur in neque blandit, consequat quam et, pellentesque orci. Vivamus risus sem, finibus convallis diam vel, ornare blandit lacus. Vestibulum molestie purus quis rutrum egestas.</p> <p>Sed non mi sed odio dictum feugiat id ac dui. Sed magna justo, molestie vel sapien sed, finibus finibus tortor. Maecenas dapibus nisi justo, id sollicitudin ipsum suscipit aliquam. Pellentesque bibendum dui urna, fermentum sodales urna placerat fringilla. Curabitur et suscipit ligula. Nunc feugiat tortor vel rhoncus rutrum. Integer vitae ex vitae est porttitor semper tincidunt at turpis. Nullam bibendum accumsan maximus. Donec tincidunt sit amet sem non sollicitudin. Sed accumsan, ex vitae consectetur tempor, elit mi scelerisque sem, eu iaculis nunc purus ac diam. Maecenas tempor quam lectus, vitae rutrum velit ultricies eu. Integer maximus turpis a pulvinar maximus. Donec ultrices nulla et malesuada commodo.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id nunc a diam laoreet porttitor quis id tellus. Nulla facilisi. Nam molestie sapien ac eros sollicitudin volutpat. Duis id malesuada velit. Donec tristique orci quis ante viverra fermentum. In hac habitasse platea dictumst. Donec ut hendrerit enim. In semper enim enim, et dignissim sapien placerat eu. Mauris ac sapien a enim euismod tincidunt in non justo. Vivamus tincidunt placerat mauris, sit amet scelerisque nisl varius nec. Sed commodo pharetra dolor a feugiat. Pellentesque enim risus, condimentum nec nisi a, vehicula feugiat elit. Phasellus vulputate diam eu sagittis suscipit. Curabitur tempor posuere nibh non congue.</p> <p>Praesent eget tortor dapibus, scelerisque nisl ut, lobortis neque. Ut vel ex id nibh pretium commodo sed id odio. Mauris vulputate justo id facilisis ornare. Nullam efficitur orci leo. Donec laoreet vehicula justo, sed sollicitudin dolor. Quisque at mattis enim. Quisque at eleifend lorem. Curabitur non ex id mi eleifend sagittis vel quis mauris. Nulla mattis tellus arcu, vitae gravida neque condimentum a. Nulla faucibus pulvinar risus in consectetur. Nunc tristique tincidunt velit, a gravida erat egestas nec. Mauris interdum ultrices risus vel hendrerit. Fusce sed odio erat. Proin ac ornare purus. Donec laoreet luctus maximus.</p> <p>Sed id erat ut leo auctor molestie id a lectus. Fusce orci nibh, euismod at risus vitae, laoreet rhoncus purus. Ut hendrerit mollis tempor. Quisque ullamcorper in est dignissim accumsan. Fusce maximus purus porta lorem aliquet pretium. Mauris nec egestas nisl. Proin venenatis sem et arcu imperdiet, at interdum mauris varius. Vestibulum metus justo, euismod ac ipsum quis, blandit venenatis lectus. Sed non vehicula ligula.</p> <p>Nunc in lorem egestas, gravida neque a, iaculis massa. Vestibulum porttitor sed nibh eget auctor. Aliquam dictum posuere diam, et elementum justo consequat sed. Morbi eu suscipit quam. Phasellus fringilla non mi ac volutpat. Proin in massa tellus. Curabitur rhoncus ultrices est, vitae mollis purus commodo vitae. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc sagittis felis risus, in dictum nibh tincidunt quis. Curabitur in neque blandit, consequat quam et, pellentesque orci. Vivamus risus sem, finibus convallis diam vel, ornare blandit lacus. Vestibulum molestie purus quis rutrum egestas.</p> <p>Sed non mi sed odio dictum feugiat id ac dui. Sed magna justo, molestie vel sapien sed, finibus finibus tortor. Maecenas dapibus nisi justo, id sollicitudin ipsum suscipit aliquam. Pellentesque bibendum dui urna, fermentum sodales urna placerat fringilla. Curabitur et suscipit ligula. Nunc feugiat tortor vel rhoncus rutrum. Integer vitae ex vitae est porttitor semper tincidunt at turpis. Nullam bibendum accumsan maximus. Donec tincidunt sit amet sem non sollicitudin. Sed accumsan, ex vitae consectetur tempor, elit mi scelerisque sem, eu iaculis nunc purus ac diam. Maecenas tempor quam lectus, vitae rutrum velit ultricies eu. Integer maximus turpis a pulvinar maximus. Donec ultrices nulla et malesuada commodo.</p> </div> </div> <div id="footer"> <input class="uk-button uk-button-primary" id="up" type="button" value="Scroll up"> </div>