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>

此外，您不必仅仅因为href=""的第二个<a>包含数字而使您的功能加倍。只需使用a[href*="#"]，这意味着属性包含选择器。详细了解here。

第二个问题是，您无法使用#或数字启动ID。 ID和类必须始终以字母开头。像这样编辑你的HTML，一切运作良好。

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

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

scrollTop在Mozilla中运行，但在Chrome中不运行

1 个答案: