CODEWITHSUNDEEP
jquerycssscrolloverflow
rainerbrunotte
rainerbrunotte

Reputation: 907

Scroll the content inside a scrollable div when clicking an element

I have a DIV which is limited in height, and has a scrollable overflow. I would like to add two manual scroll links that when they are clicked, the content inside the DIV scrolls up or down.

CSS

#inner {
   max-height: 400px;
   overflow: scroll;
}

JS

function scrolldown() {
   document.getElementById('#inner').scrollTop -= 10;
}
function scrollup() {
   document.getElementById('#inner').scrollTop += 10;
}

HTML

<div id="inner">
    Looooong content here
</div>
<a href="#" onClick="return false" onmousedown="javascript:scrollup();">
    <img src="up.png"/>
</a>
<a href="#" onClick="return false" onmousedown="javascript:scrolldown();">
    <img src="down.png"/>
</a>

However it does not really work ...

Upvotes: 2

Views: 2970

Answers (2)

Evgeny Samsonov
Evgeny Samsonov

Reputation: 2750

You can't use CSS selector in getElementById.

function scrolldown() {
    document.getElementById('inner').scrollTop -= 10;
}
function scrollup() {
    document.getElementById('inner').scrollTop += 10;
}

Upvotes: 4

Thaillie
Thaillie

Reputation: 1362

You used a double selector, getElementById does not need the # in its argument. And if you put the javascript between the <head> tags it should work fine.

function scrolldown() {
    document.getElementById('inner').scrollTop -= 10;
}
function scrollup() {
    document.getElementById('inner').scrollTop += 10;
}

Upvotes: 1

Related Questions