1

我有一个 jquery 脚本，用于滚动突出显示的单词，可以在输入中插入单词进行搜索。一切正常，但以某种奇怪的方式。我已经设置 #demo-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

4

1 回答 1

2

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

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

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

于 2013-06-17T13:49:19.767 回答