Best IT Recipes

Create a nice scroll / slide effect with JS

I would like to create a “smooth” scroll animation that slides down from one element to another. I do not want to use jQuery or any libraries, just javascript and HTML. I tried:

element.scrollIntoView();

This causes scrolling, but not smooth animation. I already examined some other smoothing methods, but they use jQuery. I would also add that the scroll should be from ELEMENT on the page to another ELEMENT on the page. Scroll down. Only a javascript function is also available, for example function scrollFromHere(from, to) .

0
javascript dom
Nov 14 '16 at 10:32
source share
2 answers

Nothing, I think I found the answer to my question. There was a lot of search, but here it is:

 <div id="elem1"><button onclick="scrollToward('elem2', 'elem1');">Scroll Down</button></div> <div id="elem2"></div> <script> //Here is my script: function animate(elem,style,unit,from,to,time,prop) { if( !elem) return; var start = new Date().getTime(), timer = setInterval(function() { var step = Math.min(1,(new Date().getTime()-start)/time); if (prop) { elem[style] = (from+step*(to-from))+unit; } else { elem.style[style] = (from+step*(to-from))+unit; } if( step == 1) clearInterval(timer); },25); elem.style[style] = from+unit; } function scrollToward(ele, from) { var target = document.getElementById(ele); from = document.getElementById(from).offsetTop; animate(document.body, "scrollTop", "", from, target.offsetTop, 1500, true); } </script>

Tested and works when you create divs in such a way as to create a scroll bar. Found the answer here .

-one
Nov 14 '16 at 22:43
source share
  !doctype html> <head> <style> /* Prevents slides from flashing */ #slides { display:none; } </style> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script src="jquery.slides.min.js"></script> <script> $(function(){ $("#slides").slidesjs({ width: 940, height: 528 }); }); </script> </head> <body> <div id="slides"> <img src=""> </div> </body>
-2
Nov 14 '16 at 22:35
source share


More articles:


All Articles