Question

我有一个菜单，它使用Jquery平滑地滚动到我设置好的锚点。

$(document).ready(function(){
$('a[href^="#"]').bind('click.smoothscroll',function (e) {
    e.preventDefault();

    var target = this.hash,
    $target = $(target);

    $('html, body').stop().animate({
        'scrollTop': $target.offset().top
    }, 500, 'swing', function () {
        window.location.hash = target;
    });
});
});

希望这可以帮助其他人寻找解决方案。

我一直在寻找一种方法来在滚动完成后突出显示（然后慢慢淡出）div但是，找不到一个简单的解决方案，因为我是一个完整的jquery菜鸟。

Answer 1

使用你目前拥有的东西，我已经设法做了一些事情，在背景中放入一个临时元素来'闪现' - 然后删除它。

$('<div />')
    .css({
        'width':'100%',
        'height':'100%',
        'position':'absolute',
        'display':'none',
        'background':'red',
        'top':'0',
        'left':'0'
    })
    .prependTo($target)
    .fadeIn('fast', function(){
        $(this).fadeOut('fast', function(){
            $(this).remove();
        });
    });

http://jsfiddle.net/23VeR/1/

不幸的是，它显示在文本的前面，因此我在HTML中添加了一些<div>并设置了一些position CSS属性。所以检查一下：

http://jsfiddle.net/23VeR/2/

仍然可能值得在评论中查看我的链接 - 或者还有一些其他插件可以让您为css background-color属性设置动画。

此外，如果您不关心向后兼容性，那么您可以使用CSS3过渡。有关详细信息，请参阅此问题：Transition of background-color

Answer 2

我制作了一个解决这个问题的插件。

https://github.com/cloudratha/active-scroll-js

它使用自定义数据属性链接到目标ID。单击锚点将平滑滚动到目标元素。它确定哪个锚点最接近当前滚动位置，并使用自定义类突出显示锚点。

Jquery滚动到然后用锚点突出显示div

2 个答案: