Scroll Down div when click on element

Question

I've seen some custom Scrollbard but don't work for what I need... I have a div element with dynamic text, sometimes there is lots of text so scroll bars shows up, I wonder if is possible to overflow: hidden; and have an image (arrow pointing down) that when clicked, the div will scroll down normally like when using the browsers scrollbar.
I have seen lots of this: https://grsmto.github.io/simplebar, all have scroll bars on the side, none has what I want.

score 0 · Answer 1 · answered Sep 26 '17 at 19:40

Have you actually attempted to create this? Provide code that you have attempted so that we may edit that, as opposed to writing the whole thing for you. You didn't make it entirely clear if you wanted to jump down to a position, slowly scroll down while the button is held down, or what exactly so I'll provide a few different types.

window.scrollTo(0, 100);

If you know how far down you want to jump, you could use this. Alternately, using HTML you can do the following to jump to a specific part of a page.

<a href="#jumpLocation">Jump to element with id jumpLocation</a>

`window.ScrollTo(0, 100)` doesn't work, for me, I did tried, `` element with an anchor tag doesn't work unless you put an ID to each `
` element. and no, I'm not asking you or anybody else to do anything for me, as I mentioned I have already searched and tested plugins and css. — Tanker, Sep 26 '17 at 20:14

score 0 · Answer 2 · answered Sep 26 '17 at 19:47

0

You just have to google it better. Look at element.scrollTop method, more here. And a thread from stackoverflow..

answered Sep 26 '17 at 19:47

Artur Wojnar

31
3

score 0 · Accepted Answer · answered Sep 26 '17 at 19:52

Here it is (only the basics):

function scrollDown() {
  var cuttentOffsetTop = $('#inner').offset().top
  $('#inner').offset({top: (cuttentOffsetTop - 10)})
}

#container {
  width: 100%;
  height: 300px;
  background-color: gray;
  overflow-y: hidden;
  position: relative;
}

.item {
  width: 100%;
  height: 100px;
  background-color: violet;
}

.item + .item {
  margin-top: 10px;
}

#scroll-down {
  background-color: forestgreen;
  color: white;
  margin-bottom: 10px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="scroll-down" onclick="scrollDown()">Click here to scroll down</div>
<div id="container">
  <div id="inner">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
  </div>
</div>

If you need an explanation - just ask.

That is exactly what I was looking for, I added another function `scrollUp();` based on this example, it works perfect, I also added `smoothScroll();` animation to it, looks great. Thank you. — Tanker, Sep 26 '17 at 20:19

Scroll Down div when click on element

3 Answers3