Question

可能会重复，但我似乎无法找到正确的答案。

我有一个按钮，当我按下它时，我希望它滚动到ID为“＃li-1”的li项目，并让它悬停。我知道我的代码是错误的，但不确定如何解决它（jquery新手）。那么我该如何达到预期的效果呢？

这是一个jsfiddle链接 - https://jsfiddle.net/orb1vw28/7/

提前致谢

$(document).ready(function(){

    $('.button').click(function(){
        $('body').scrollTo('#li-1', 200);
        $("#li-1").toggleClass("hov");
    });
})

Answer 1

好的，您的代码中存在一些问题，但我做了一些小的更改并将其管理起来。

JSfiddle wans没有为我工作，所以我给你做了笔。

http://codepen.io/filipemerker/pen/jbvxyY

问题是你需要将数值传递给＆＃34; scrollTo＆＃34;而不是选择器。我刚刚计算了父滚动顶部减去LI元素scrolltop之间的差异。我还为你添加了一个动画。看看吧。

$('#event-list').stop().animate({scrollTop:location}, '200', 'linear');

Answer 2

您可以使用the getScrollTargetPosition() function in this gist计算正确的目标位置 - 滚动到的位置 - （评论很多，因此无需在此解释）。

根据它和jQuery.scrollable plugin - 它解决了cross-browser issues以及一堆scroll-related usability problems - ，你最终得到了这段代码：

$( document ).ready( function () {
    $( ".button" ).click( function ( event ) {

        var $window = $( window ),
            $scrollContainer = $( "#event-list" ),
            $target = $( "#li-1" ),
            targetPosition = getScrollTargetPosition ( $target, $window );

        event.preventDefault();

        $scrollContainer.scrollTo( targetPosition, {
            complete: function () {
                $target.toggleClass( "hov" );
            }
        } );

    } );
} );

要查看它的实际效果，请在JSBin（result，source）中查看。

如何在单击按钮时滚动到元素并使其悬停？

2 个答案: