初始化 jquery 插件时设置 scrollTop

Question

I have a jQuery plugin:

http://jsfiddle.net/2kbrfv9z/

The plugin works great, but I want to pass settings to the plugin so that I can set the ul on the right number.

When I initialize the plugin and I want to set the start time on 2:00:00 I add a scroll top on the ul to set the right li. (ul with value 0 is scrollTop(0) and 1 is scrollTop(35)). But I don't get it working.

Maybe I'm missing something.

I tried to set the scrolltop of the element. Without a result.

hourElement.scrollTop(70);

Answer 1

Without a minimal reproducible example I can't dive too much into your code (as your jsfiddle is quite large) but I've created a small jsfiddle which contains a ul like yours with an li for every hour of the day and a button which, when clicked, jumps to the li which represents the current hour of the day.

For example the html looks like:

<button>
click me
</button>

<ul id="minutes">
    <li class="timeItem">1</li>
    <li class="timeItem">2</li>
    <li class="timeItem">3</li>
    <li class="timeItem">4</li>
    <li class="timeItem">5</li>
    <li class="timeItem">6</li>
    <li class="timeItem">7</li>
    <li class="timeItem">8</li>
    <li class="timeItem">9</li>
    <li class="timeItem">10</li>
    <li class="timeItem">11</li>
    <li class="timeItem">12</li>
    <li class="timeItem">13</li>
    <li class="timeItem">14</li>
    <li class="timeItem">15</li>
    <li class="timeItem">16</li>
    <li class="timeItem">17</li>
    <li class="timeItem">18</li>
    <li class="timeItem">19</li>
    <li class="timeItem">20</li>
    <li class="timeItem">21</li>
    <li class="timeItem">22</li>
    <li class="timeItem">23</li>
</ul>

and in the javascript I do:

$(document).ready(function()
{
    $('button').click(function()
    {
        var hour = new Date().getHours();
        // the hour of the day * the height of one li
        // less 30 to account for the li starting on hour 1
        var toScroll = (hour * 30) - 30;
        $('ul').scrollTop(toScroll);
    });
});

It seems to work as you desire. If you provide a minimal reproducible example I can look into your code more specifically, in the meantime you can find the fiddle here.