jQuery - 平滑滚动代码不工作

所以，我正在制作一个网页，并希望使用jQuery在其中包含一些平滑滚动。问题是我的代码不工作，当我点击链接时，页面直接跳转到现场，而不是平滑滚动。下面的代码的relevat部分 -jQuery - 平滑滚动代码不工作

HTML -

<script src="scroll.js"></script> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script> 
</head> 
<body> 
<div id="sec1"> 
    <span id="header">Heading</span> 
    <!--<span id="notheader">Umesh meena is the coolest</span>--> 
    <!--<div id="navbar" class="before">lol</div>--> 
    <a href="#sec2" id="button1" >link to the page</a> 
</div> 
<div id="sec2"> 
    <span id="main">lorem</span> 
</div> 
</body> 
</html>

SCROLL.js文件 -

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

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

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

从这个

除了我有另一个JavaScript文件的链接（这我不应该认为应该干涉请帮助/建议选项

来源

2016-06-10 Umesh Meena

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

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

 
    if ($target.length === 0) { 
 
     alert('No target!'); 
 
     return; 
 
    } 
 
    
 
    $('html, body').animate({ 
 
     scrollTop: $target.offset().top 
 
    }, 900, 'swing', function() { 
 
     window.location.hash = target; 
 
    }); 
 
    }); 
 
});

div[id*="sec"] { 
 
    margin-bottom: 500px 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="sec1"> 
 
    <span id="header">Heading</span> 
 
    <!--<span id="notheader">Umesh meena is the coolest</span>--> 
 
    <!--<div id="navbar" class="before">lol</div>--> 
 
    <a href="#sec2" id="button1">link to the page</a> 
 
    <a href="#sec3" id="button2">link to the page</a> 
 
    <a href="#sec4" id="button3">link to no target</a> 
 
</div> 
 
<div id="sec2"> 
 
    <span id="main">lorem</span> 
 
</div> 
 
<div id="sec3"> 
 
    <span id="main">ipsum</span> 
 
</div> 
 
<div id="notarget"> 
 
    <span id="main">Vous aved un chat.</span> 
 
</div>

来源

2016-06-10 10:31:57 keziah

jQuery - 平滑滚动代码不工作

回答

相关问题