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

Darryl Noakes · Accepted Answer · 2022-09-12T15:59:51.380

2

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' 
});

Support for behavior: "smooth" is Chrome 61, Edge 79, Firefox 36, Safari 15.4. So Safari is the only real issue for support, assuming you want to support more than just the latest major of Safari (as of 2022).

edited Sep 12 '22 at 15:59

answered May 11 '21 at 22:08

Darryl Noakes

2,207
1
9
27

This is very nice. In fact, not only is it way shorter and cleaner than the older answer, but it works better as well. I've used this several times since it was implemented, completely abandoning the old approach. Heck, I'm going to unmark my own answer as the accepted answer and accept this answer. Thanks for posting it regardless of this being an old question. – Cannicide Sep 12 '22 at 03:01

score 1 · Answer 2 · 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 -3 · Answer 3 · answered Nov 14 '16 at 22:35

-3

 !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

143
14

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