scrollTop 在 Mozilla 中有效，但在 Chrome 中无效

Question

我想通过 JavaScript 添加一个scrollTop 动画。它在 Mozilla 中运行良好，但在 Chrome 中根本不行。在 Chrome 中单击该链接不会执行任何操作。

这是我的代码：

<script type="text/javascript">

        $(document).ready(function() {
            $('a[href=#smart_tshirt]').click(function(){

                $('html, body').animate({scrollTop:1400}, 'slow');                    
            });
            $('a[href=#smart_tshirt2]').click(function(){

                $('html, body').animate({scrollTop:1400}, 'slow');                    
            });       
          return false;
        });              
    </script>

<div style="top: 0px; left: 140px; font-size: 32px; text-align: left; width: 100%;      
height: 47px; font-family: 'League Gothic'; color: rgb(102, 102, 102); line-height: 
25px;   float: left;"><a href="#smart_tshirt" id="#smart_tshirt">Smart<br />

T-shirt</a></div>

<div style="top: 80px; left: 140px; font-size: 14px; text-align: left; height: 100px;    
font-family: 'Carrois Gothic',sans-serif; color: rgb(102, 102, 102); line-height: 19px;  
width: 130px; float: left;">With integrated cardiac sensors.</div>


<div style="top: 29px; left: 260px; width: 19px; height: 19px; float: left;"><a   
href="#smart_tshirt2" id="#smart_tshirt2"><img alt="smart t-shirt" 
src="images/universo/flechaNar.jpg" /></a></div>

</div>

Answer 1

你想在你的全局对象中使用return false; 来完成什么？这必须添加到您的 click 事件中以防止正常行为。

<script type="text/javascript">
    $(document).ready(function() {
        $('a[href*="#smart_tshirt"]').on('click', function() {
            $('html, body').animate({ scrollTop: 1400 }, 'slow');  

            return false;
        });
    });              
</script>

您也不必因为<a> 的第二个href="" 包含一个数字而将函数加倍。只需使用a[href*="#"]，这意味着属性包含选择器。阅读更多关于 here 的信息。

第二个问题是，您不能以# 或数字开头的ID。 ID 和类必须始终以字母开头。像这样编辑您的 HTML，一切正常。

<a href="#smart_tshirt" id="smart_tshirt">Smart T-shirt</a>

工作示例：http://jsfiddle.net/3mPfc/10/