1

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

示例：http: //jsfiddle.net/23VeR/

$(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 noob，所以找不到简单的解决方案。

4

2 回答 2

2

仅使用您目前拥有的东西，我设法通过在背景中放置一个临时元素来“闪烁” - 然后将其删除。

$('<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/

不幸的是它显示在文本前面，所以我<div>在 HTML 中添加了一些 s 并设置了一些positionCSS 属性。所以看看这个：

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

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

此外，如果您不关心向后兼容性，那么您可以使用 CSS3 过渡。有关更多信息，请参阅此问题：背景颜色的过渡

于 2013-03-21T12:28:30.473 回答
0

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

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

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

于 2016-04-08T14:46:06.393 回答