Create a nice scrolling/sliding effect with JS

Question

I would like to create a "smooth" scroll animation that slides down from one element to the next. I do not want to use Jquery or any libraries, just javascript and HTML. I have tried:

element.scrollIntoView();

This causes scrolling, but not a smooth animation. I have already looked at some other smooth-scrolling techniques, but they use Jquery. I would also like to add that the scrolling should be from ELEMENT on a page to another ELEMENT on the page. Scroll down only. Also only javascript function like function scrollFromHere(from, to).

http://stackoverflow.com/questions/17733076/smooth-scroll-anchor-links-without-jquery — CollinD, Nov 14 '16 at 22:34
Possible duplicate of [Javascript smooth scroll WITHOUT the use of jQuery](http://stackoverflow.com/questions/10063380/javascript-smooth-scroll-without-the-use-of-jquery) — Vadzim Savenok, Nov 14 '16 at 22:34
not duplicate: I am looking for smooth scroll from ELEMENT TO ELEMENT not top to element. — Cannicide, Nov 14 '16 at 22:36
@IamGuest That example is just showing how to smoothly scroll *to* an element. It uses the top scroll position since that's what you have to change to scroll the page. — Mike Cluck, Nov 14 '16 at 22:38
I have a button on the page somewhere. When I click it, I want to scroll from THAT button to an element somewhere even lower. — Cannicide, Nov 14 '16 at 22:39
https://stackoverflow.com/search?q=%5Bjavascript%5D+-%5Bjquery%5D+scroll+smooth — Felix Kling, Nov 14 '16 at 22:40
*"When I click it, I want to scroll from THAT button"* In other words, you want to scroll from where you *currently* are *to* an element. — Felix Kling, Nov 14 '16 at 22:42
@IamGuest So implement any of the numerous smooth scroll implementations that have been linked to you. They all allow you to do that. — Mike Cluck, Nov 14 '16 at 22:42
Most answers I've been getting were Jquery and I can't use that as I mentioned. — Cannicide, Nov 14 '16 at 22:46
I've got an answer. See my comment on one of the answers below. — Cannicide, Nov 14 '16 at 22:52

score 1 · Accepted Answer · edited May 23 '17 at 12:24

Never mind, I think I found an answer to my question. It took lots of searching, 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 style the divs in a way that creates a scrollbar. Found the answer here.

tested and works! This is the correct answer. I'm using this to create a smooth-scrolling effect when I click a button, but others may use it differently. — Cannicide, Nov 14 '16 at 22:50
Plagiarism is bad. Please credit the original author of this solution. http://stackoverflow.com/questions/17733076/smooth-scroll-anchor-links-without-jquery — CollinD, Nov 15 '16 at 00:57
Sorry, I think I was misunderstood. I searched on the web and found this code, I didn't make it myself. And yes, I think I may have gotten it from that stackoverflow question. Sorry and thanks, @CollinD. — Cannicide, Nov 25 '16 at 23:56

score 1 · Answer 2 · answered May 11 '21 at 22:08

1

I know this is an old answer, but for anyone looking for a solution in "modern times", scrollIntoView supports the behavior parameter:

element.scrollIntoView({ 
  behavior: 'smooth' 
});

answered May 11 '21 at 22:08

Darryl Noakes

133
2
10

score -2 · Answer 3 · answered Nov 14 '16 at 22:35

-2

 !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>

answered Nov 14 '16 at 22:35

Omar Barrera Valentin

145
13

2

OP does **not** want to use jQuery and I really doubt they want to install a jQuery plugin. – Mike Cluck Nov 14 '16 at 22:36
I don't want use of Jquery – Cannicide Nov 14 '16 at 22:36

Create a nice scrolling/sliding effect with JS

3 Answers3

Linked