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文件的链接(这我不应该认为应该干涉请帮助/建议选项
答
$(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>