snipt

Ctrl+h for KB shortcuts

Text only

.scrollTop

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
$(function() {
    var ele   = $('#scroll');
    var speed = 25, scroll = 5, scrolling;
    
    $('#scroll-up').mouseenter(function() {
        // Scroll the element up
        scrolling = window.setInterval(function() {
            ele.scrollTop( ele.scrollTop() - scroll );
        }, speed);
    });
    
    $('#scroll-down').mouseenter(function() {
        // Scroll the element down
        scrolling = window.setInterval(function() {
            ele.scrollTop( ele.scrollTop() + scroll );
        }, speed);
    });
    
    $('#scroll-up, #scroll-down').bind({
        click: function(e) {
            // Prevent the default click action
            e.preventDefault();
        },
        mouseleave: function() {
            if (scrolling) {
                window.clearInterval(scrolling);
                scrolling = false;
            }
        }
    });
});
</script>
<style type="text/css">
<!--
div#scroll {
    width: 200px;
    height: 200px;
    overflow: hidden;
    padding: 4px;
    margin-bottom: 20px;
}
-->
</style>
</head>
<body>

<div id="scroll">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div>

<a href="#" id="scroll-down">Down</a> - <a href="#" id="scroll-up">Up</a>

</body>
</html>
https://snipt.net/embed/b26f37f24e270eca1de17f010ac7abde/
/raw/b26f37f24e270eca1de17f010ac7abde/
b26f37f24e270eca1de17f010ac7abde
text
Text only
59
2019-06-26T18:07:41
True
False
False
/api/public/snipt/28822/
scrolltop
<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><a href="#L-1"> 1</a> <a href="#L-2"> 2</a> <a href="#L-3"> 3</a> <a href="#L-4"> 4</a> <a href="#L-5"> 5</a> <a href="#L-6"> 6</a> <a href="#L-7"> 7</a> <a href="#L-8"> 8</a> <a href="#L-9"> 9</a> <a href="#L-10">10</a> <a href="#L-11">11</a> <a href="#L-12">12</a> <a href="#L-13">13</a> <a href="#L-14">14</a> <a href="#L-15">15</a> <a href="#L-16">16</a> <a href="#L-17">17</a> <a href="#L-18">18</a> <a href="#L-19">19</a> <a href="#L-20">20</a> <a href="#L-21">21</a> <a href="#L-22">22</a> <a href="#L-23">23</a> <a href="#L-24">24</a> <a href="#L-25">25</a> <a href="#L-26">26</a> <a href="#L-27">27</a> <a href="#L-28">28</a> <a href="#L-29">29</a> <a href="#L-30">30</a> <a href="#L-31">31</a> <a href="#L-32">32</a> <a href="#L-33">33</a> <a href="#L-34">34</a> <a href="#L-35">35</a> <a href="#L-36">36</a> <a href="#L-37">37</a> <a href="#L-38">38</a> <a href="#L-39">39</a> <a href="#L-40">40</a> <a href="#L-41">41</a> <a href="#L-42">42</a> <a href="#L-43">43</a> <a href="#L-44">44</a> <a href="#L-45">45</a> <a href="#L-46">46</a> <a href="#L-47">47</a> <a href="#L-48">48</a> <a href="#L-49">49</a> <a href="#L-50">50</a> <a href="#L-51">51</a> <a href="#L-52">52</a> <a href="#L-53">53</a> <a href="#L-54">54</a> <a href="#L-55">55</a> <a href="#L-56">56</a> <a href="#L-57">57</a> <a href="#L-58">58</a> <a href="#L-59">59</a></pre></div></td><td class="code"><div class="highlight"><pre><span></span><span id="L-1"><a name="L-1"></a>&lt;!DOCTYPE html&gt; </span><span id="L-2"><a name="L-2"></a>&lt;html&gt; </span><span id="L-3"><a name="L-3"></a>&lt;head&gt; </span><span id="L-4"><a name="L-4"></a>&lt;script type=&quot;text/javascript&quot; src=&quot;http://code.jquery.com/jquery-1.4.4.min.js&quot;&gt;&lt;/script&gt; </span><span id="L-5"><a name="L-5"></a>&lt;script type=&quot;text/javascript&quot;&gt; </span><span id="L-6"><a name="L-6"></a>$(function() { </span><span id="L-7"><a name="L-7"></a> var ele = $(&#39;#scroll&#39;); </span><span id="L-8"><a name="L-8"></a> var speed = 25, scroll = 5, scrolling; </span><span id="L-9"><a name="L-9"></a> </span><span id="L-10"><a name="L-10"></a> $(&#39;#scroll-up&#39;).mouseenter(function() { </span><span id="L-11"><a name="L-11"></a> // Scroll the element up </span><span id="L-12"><a name="L-12"></a> scrolling = window.setInterval(function() { </span><span id="L-13"><a name="L-13"></a> ele.scrollTop( ele.scrollTop() - scroll ); </span><span id="L-14"><a name="L-14"></a> }, speed); </span><span id="L-15"><a name="L-15"></a> }); </span><span id="L-16"><a name="L-16"></a> </span><span id="L-17"><a name="L-17"></a> $(&#39;#scroll-down&#39;).mouseenter(function() { </span><span id="L-18"><a name="L-18"></a> // Scroll the element down </span><span id="L-19"><a name="L-19"></a> scrolling = window.setInterval(function() { </span><span id="L-20"><a name="L-20"></a> ele.scrollTop( ele.scrollTop() + scroll ); </span><span id="L-21"><a name="L-21"></a> }, speed); </span><span id="L-22"><a name="L-22"></a> }); </span><span id="L-23"><a name="L-23"></a> </span><span id="L-24"><a name="L-24"></a> $(&#39;#scroll-up, #scroll-down&#39;).bind({ </span><span id="L-25"><a name="L-25"></a> click: function(e) { </span><span id="L-26"><a name="L-26"></a> // Prevent the default click action </span><span id="L-27"><a name="L-27"></a> e.preventDefault(); </span><span id="L-28"><a name="L-28"></a> }, </span><span id="L-29"><a name="L-29"></a> mouseleave: function() { </span><span id="L-30"><a name="L-30"></a> if (scrolling) { </span><span id="L-31"><a name="L-31"></a> window.clearInterval(scrolling); </span><span id="L-32"><a name="L-32"></a> scrolling = false; </span><span id="L-33"><a name="L-33"></a> } </span><span id="L-34"><a name="L-34"></a> } </span><span id="L-35"><a name="L-35"></a> }); </span><span id="L-36"><a name="L-36"></a>}); </span><span id="L-37"><a name="L-37"></a>&lt;/script&gt; </span><span id="L-38"><a name="L-38"></a>&lt;style type=&quot;text/css&quot;&gt; </span><span id="L-39"><a name="L-39"></a>&lt;!-- </span><span id="L-40"><a name="L-40"></a>div#scroll { </span><span id="L-41"><a name="L-41"></a> width: 200px; </span><span id="L-42"><a name="L-42"></a> height: 200px; </span><span id="L-43"><a name="L-43"></a> overflow: hidden; </span><span id="L-44"><a name="L-44"></a> padding: 4px; </span><span id="L-45"><a name="L-45"></a> margin-bottom: 20px; </span><span id="L-46"><a name="L-46"></a>} </span><span id="L-47"><a name="L-47"></a>--&gt; </span><span id="L-48"><a name="L-48"></a>&lt;/style&gt; </span><span id="L-49"><a name="L-49"></a>&lt;/head&gt; </span><span id="L-50"><a name="L-50"></a>&lt;body&gt; </span><span id="L-51"><a name="L-51"></a> </span><span id="L-52"><a name="L-52"></a>&lt;div id=&quot;scroll&quot;&gt; </span><span id="L-53"><a name="L-53"></a> &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum&lt;/p&gt; </span><span id="L-54"><a name="L-54"></a>&lt;/div&gt; </span><span id="L-55"><a name="L-55"></a> </span><span id="L-56"><a name="L-56"></a>&lt;a href=&quot;#&quot; id=&quot;scroll-down&quot;&gt;Down&lt;/a&gt; - &lt;a href=&quot;#&quot; id=&quot;scroll-up&quot;&gt;Up&lt;/a&gt; </span><span id="L-57"><a name="L-57"></a> </span><span id="L-58"><a name="L-58"></a>&lt;/body&gt; </span><span id="L-59"><a name="L-59"></a>&lt;/html&gt; </span></pre></div> </td></tr></table>
jquery