How to Scroll Left or Right Inside a Div Using Pure JavaScript Function and No Jquery

scroll visible part of overflown div inside smaller div without jquery

var outerDiv = document.getElementById('outer-div');
function moveLeft() {  outerDiv.scrollLeft -= 100;}
function moveRight() {  outerDiv.scrollLeft += 100;}
var leftButton = document.getElementById('left-button');var rightButton = document.getElementById('right-button');
leftButton.addEventListener('click', moveLeft, false);rightButton.addEventListener('click', moveRight, false);

<div id="outer-div" style="width:250px;overflow:hidden;">  <div style="width:750px;">    <div style="background-color:orange;width:250px;height:100px;float:left;">    </div>    <div style="background-color:red;width:250px;height:100px;float:left;">    </div>    <div style="background-color:blue;width:250px;height:100px;float:left;">    </div>  </div></div><button id="left-button">left</button><button id="right-button">right</button>

Smooth scroll anchor links WITHOUT jQuery

Using the function from here: JavaScript animation and modifying it to modify a property (not only a style's property), you can try something like this:

DEMO: http://jsfiddle.net/7TAa2/1/

Just saying...

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);
  if (prop) {
    elem[style] = from + unit;
  } else {
    elem.style[style] = from + unit;
  }
}

window.onload = function() {
  var target = document.getElementById("div5");
  animate(document.scrollingElement || document.documentElement, "scrollTop", "", 0, target.offsetTop, 2000, true);
};

div {
  height: 50px;
}

<div id="div1">asdf1</div>
<div id="div2">asdf2</div>
<div id="div3">asdf3</div>
<div id="div4">asdf4</div>
<div id="div5">asdf5</div>
<div id="div6">asdf6</div>
<div id="div7">asdf7</div>
<div id="div8">asdf8</div>
<div id="div9">asdf9</div>
<div id="div10">asdf10</div>
<div id="div10">asdf11</div>
<div id="div10">asdf12</div>
<div id="div10">asdf13</div>
<div id="div10">asdf14</div>
<div id="div10">asdf15</div>
<div id="div10">asdf16</div>
<div id="div10">asdf17</div>
<div id="div10">asdf18</div>
<div id="div10">asdf19</div>
<div id="div10">asdf20</div>

How to scroll to an element inside a div?

You need to get the top offset of the element you'd like to scroll into view, relative to its parent (the scrolling div container):

var myElement = document.getElementById('element_within_div');
var topPos = myElement.offsetTop;

The variable topPos is now set to the distance between the top of the scrolling div and the element you wish to have visible (in pixels).

Now we tell the div to scroll to that position using scrollTop:

document.getElementById('scrolling_div').scrollTop = topPos;

If you're using the prototype JS framework, you'd do the same thing like this:

var posArray = $('element_within_div').positionedOffset();
$('scrolling_div').scrollTop = posArray[1];

Again, this will scroll the div so that the element you wish to see is exactly at the top (or if that's not possible, scrolled as far down as it can so it's visible).

Scroll to top link for website using pure JAVASCRIPT without(jquery)

Here is the answer

HTML

<a id="scroll_to_top_id"></a>

CSS

#scroll_to_top_id {
  display: none;
  position: fixed;
  right: 30px;
  bottom: 30px;
  background
}

PURE JAVASCRIPT(NO JQUERY)

/*
 *  Scroll To Top
 */

var your_header        = document.getElementById('header_id'),
    scroll_to_top   = document.getElementById('scroll_to_top_id');


window.onscroll = function(ev) {

    var  scrollTop = window.pageYOffset || document.body.scrollTop;
    if (scrollTop > your_header.offsetHeight + 100) {

        scroll_to_top.style.display = 'block';
    }
    else{
        scroll_to_top.style.display = 'none';   
    }
};

scroll_to_top.onclick = function () {
    scrollTo(document.body, 0, 100);
}

/*
 *  scroll to body top
 *  element, position and time duration
 */
function scrollTo(element, to, duration) {
        if (duration < 0) return;
        var difference = to - element.scrollTop;
        var perTick = difference / duration * 2;

    setTimeout(function() {
        element.scrollTop = element.scrollTop + perTick;
        scrollTo(element, to, duration - 2);
    }, 10);
}

Check if scrolled past div with JavaScript (no jQuery)

Listen for the scroll event. To find the current scroll position, you can call the scollY method.

To get the Y coordinate of the top of an element, you can use the element's offsetTop. Because the element has a height, we want to add the height to our calculation.

That's it.

window.addEventListener("scroll", function() {  var elementTarget = document.getElementById("section-2");  if (window.scrollY > (elementTarget.offsetTop + elementTarget.offsetHeight)) {      alert("You've scrolled past the second div");  }});

.section-1 {  height: 400px;  width: 100%;  background: green;}
.section-3 {  height: 400px;  width: 100%;  background: orange;}

<div class="section-1"></div><div id="section-2">Scroll past this div</div><div class="section-3"></div>

How to do infinite scrolling with javascript only without jquery

What about replacing this line of code:

if (getDocHeight() == getScrollXY()[1] + window.innerHeight)

with the following:

if (getDocHeight() - 20 <= getScrollXY()[1] + window.innerHeight)

Where 20 is the number how much pxs from bottom you want the trigger to execute.

Fiddle