Question

我有一个jquery脚本，用于滚动突出显示的单词，可以在输入中插入单词进行搜索。一切都在运作，但是以某种奇怪的方式。我已经设置了#mode-container在脚本中设置动画，所以当你输入数据然后点击下一步时，他的滚动会移动到下一个数据。但似乎脚本有问题...... 第一次当你点击下一步它会让你看到突出显示的数据，但第二次，而不是滚动到下一个单词，它向后移动一点点，第三次跳过第二个单词并移动到第三个...

我不知道什么是问题，这里是jsfiddle中的情况：http://jsfiddle.net/dzorz/UF7VJ/

html（没有大部分文字）：

<div class="dock">
<input type="text" class="span3" id="field1" name="field1" value="term1 term2 term3 term4">
    <a class="btn btn-primary btn-mini" id="prev1" href="#"><i class="icon-arrow-up icon-white"> </i></a> 
    <a class="btn btn-primary btn-mini" id="next1" href="#"><i class="icon-arrow-down icon-white"></i></a>
</div>

<div id="outer">    
<div id="demo-container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dapibus aliquam elementum. 
Nam adipiscing rhoncus consequat. Nam sed dolor ac risus sodales auctor id sit amet quam. 
Aliquam posuere enim ipsum. Aliquam malesuada erat et lectus venenatis, eu ultricies sapien 
convallis. Morbi eu vestibulum leo. Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Aliquam neque augue, placerat in dignissim non, faucibus id sapien. Sed 
vitae ligula venenatis, blandit orci in, hendrerit ipsum. In nec sem in metus hendrerit sodales.
 Cras at lectus id elit orn
</div>
</div>

脚本：

    // disable highlighting if empty
    if (searchTerm) {
        var terms = searchTerm.split(/\s+/);
        $.each(terms, function (_, term) {
            // highlight the new term
            term = term.trim();
            if (term != "") $('#demo-container').highlight(term, 'highlight1');
        });

    }
}).triggerHandler('change');

});

/**  scroll to element function **/

function scrollToElement(selector, time, verticalOffset) {
    time = typeof (time) != 'undefined' ? time : 500;
    verticalOffset = typeof (verticalOffset) != 'undefined' ? verticalOffset : 0;
    element = $(selector);
    offset = element.offset();
    offsetTop = offset.top + verticalOffset;
    $('#demo-container').animate({
        scrollTop: offsetTop
    }, time);
}

/**document ready**/
$(document).ready(function () {
    count = 0;
    var max_length = $('.highlight1').length;
    /* scroll to 150px before .highlight with animation time of 400ms */
    $('#next1').click(function (e) {
        if (count < max_length) {
            count++;
        } else {
            count = 1;
        }
        e.preventDefault();
        scrollToElement('.highlight1:nth-child(' + count + ')', 400, -150);
    });

    $('#prev1').click(function (e) {
        if (count > 1) {
            count--;
        } else {
            count = max_length;
        }
        e.preventDefault();
        scrollToElement('.highlight1:nth-child(' + count + ')', 400, -150);
    })
});

的CSS：

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

#outer{
width:500px;
height:300px;
padding-top:50px;
 }
#demo-container{
width:100%;
height:100%;
 overflow:auto;
}

.dock{
position:fixed;
background:#FFFFFF;    
}

.highlight1 {
-moz-border-radius: 5px;
/* FF1+ */
-webkit-border-radius: 5px;
/* Saf3-4 */
border-radius: 5px;
/* Opera 10.5, IE 9, Saf5, Chrome */
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
/* FF3.5+ */
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
/* Saf3.0+, Chrome */
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
/* Opera 10.5+, IE 9.0 */
}

.highlight1{
background-color: #fff34d;
}

.highlight1 {
padding:1px 4px;
margin:0 -4px;
}

你可以自由编辑我的jsfiddle

Answer 1

更新滚动级别时忘记添加当前滚动偏移。

offsetTop = offset.top + verticalOffset + $('#demo-container').scrollTop();

http://jsfiddle.net/UF7VJ/1/

jquery滚动奇怪的跳过bug

1 个答案: