jQuery的scrollTop事件不是动画

我需要jQuery动画一起scrollTop创建一个平滑的滚动效果我的锚链接。在我目前的项目中这是行不通的。所有的动画 - scrollTop事件都无所事事。我在头文件中加载jQuery 3.1.1。在我的页脚main.js我使用下面的JavaScript：jQuery的scrollTop事件不是动画

$('a[href*=#]').on('click', function(event){  
    console.log("ScrollTop"); 
    $("html, body").animate({ scrollTop: 500 }, "slow"); 
    return false; 
});

我可以看到在我的控制台scrollTop的，但没有动画。我不知道该怎么做，我尝试了很多东西。我也在现在工作的所有不同浏览器中测试它。

来源

2016-11-07 Peesen87

这应该为你工作：

$('a[href^="#"]').on('click',function (e) { 
     var href = $(this).attr('href'); 
     e.preventDefault(); 
     var target = this.hash, 
     $target = $(target); 
     $('html, body').stop().animate({ 
      'scrollTop': $target.offset().top - 180 
     }, 900, 'swing', function() { 
      window.location.hash = target;   
     }); 
    });

来源

2016-11-07 19:28:57

THX对您有所帮助。它是滚动的，但没有偏移，也没有动画。你知道这个问题可能是什么吗？控制台中没有错误。 – Peesen87

设置你的代码的小提琴，我会看到什么是问题 –

的问题是，与href您选择包含#给人不带引号的含义不同。一旦你把#放在引号中，它就可以正常工作。

$('a[href*="#"]').on('click', function(){ 
    $('html,body').animate({scrollTop: 500}, "slow");  
});

例子：https://jsfiddle.net/3vy7adh7/

或者

如果你想避免任何有效的a标签后，

$('a').on('click', function(e) 
{  
    e.preventDefault(); 
    if($(this).attr('href').indexOf('#') > -1) 
     $('html,body').animate({scrollTop: 500},"slow");  
});

例子：https://jsfiddle.net/3vy7adh7/1/

来源

2016-11-07 19:37:34 DinoMyte

jQuery的scrollTop事件不是动画

回答

相关问题