我正在尝试制作一个摄影作品集网站，并且需要制作一个向下滚动按钮。我使用 html 和 css 制作了滚动按钮，并尝试使用 jquery 创建一个动画，当您单击向下滚动按钮时，它会慢慢地向下滚动页面。然而，截至目前，它立即进入第二部分。然而，当我在 codepen 上尝试时，动画起作用了。
https://codepen.io/alihaider2018/pen/PQQXLZ (imgs 未显示，并将背景更改为蓝色，以便您可以更好地看到按钮)
$(function() {
$('a[href*=#]').on('click', function(e) {
e.preventDefault();
$('html, body').animate({scrollTop: $($(this).attr('href')).offset().top}, 500, 'linear');
});
});
#section01 a span {
position: absolute;
top: 800px;
left: 50%;
width: 46px;
height: 46px;
margin-left: -23px;
border: 1px solid #fff;
border-radius: 100%;
box-sizing: border-box;
}
#section01 a span::after {
position: absolute;
top: 50%;
left: 50%;
content: '';
width: 16px;
height: 16px;
margin: -12px 0 0 -8px;
border-left: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
box-sizing: border-box;
}
#section01 a span::before {
position: absolute;
top: 0;
left: 0;
z-index: -1;
content: '';
width: 44px;
height: 44px;
box-shadow: 0 0 0 0 rgba(255,255,255,.1);
border-radius: 100%;
opacity: 0;
}
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="Nature.js"></script>
<link rel="stylesheet" type="text/css" href="webpage.css">
</head>
<section id="section01" class="demo">
<body background="lol.jpg" >
<div id="nav">
<ul>
<li><a href="Contact.html"> Contact </a></li>
<li><a href="AboutMe.html"> About Me </a></li>
<li><a href="Business.html"> Business </a></li>
<li><a href="Street.html"> Street </a></li>
<li><a href="Nature.html"> Nature </a></li>
</ul>
<p id="logo"><a href="webpage.html"> Icyportraitsgta </a></p>
</div>
<div id="description">
<a href="#section02"><span>
</span></a>
<p class="para"> GTA Portrait photography <br> with your favourite themes </p>
</div>
</section>
<img src="sanafull15.jpeg" class="sana15" alt="sanafull15"> </img>
<img src="sanafulle.jpeg" class="sanafulle" alt="sanafulle"> </img>
<img src="qasside.jpeg" class="qasside" alt="qasside"> </img>
<section id="section02">
<img src="icysit.jpg" class="icysit" alt="icysit"> </img>
<img src="ravedited1.jpg" class="rav1" alt="rav1"> </img>
<img src="qassmoke1.jpeg" class="qas2" alt="qas2"> </img>
</body>
</section>
</html>
最佳答案
你的 HTML 完全是无效的困惑。我尝试以某种方式修复它，并且以下动画工作正常:
(点击“section02”链接即可制作动画)
$(function() {
console.log('ready');
$('a[href^=#]').on('click', function(e) {
console.log('click');
e.preventDefault();
$('html, body').animate({
scrollTop: $($(this).attr('href')).offset().top
}, 500, 'linear');
});
});#section01 a span {
position: absolute;
top: 800px;
left: 50%;
width: 46px;
height: 46px;
margin-left: -23px;
border: 1px solid #fff;
border-radius: 100%;
box-sizing: border-box;
}
#section01 a span::after {
position: absolute;
top: 50%;
left: 50%;
content: '';
width: 16px;
height: 16px;
margin: -12px 0 0 -8px;
border-left: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
box-sizing: border-box;
}
#section01 a span::before {
position: absolute;
top: 0;
left: 0;
z-index: -1;
content: '';
width: 44px;
height: 44px;
box-shadow: 0 0 0 0 rgba(255, 255, 255, .1);
border-radius: 100%;
opacity: 0;
}<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js">
</script>
</head>
<body background="lol.jpg">
<section id="section01" class="demo">
<div id="nav">
<ul>
<li><a href="Contact.html"> Contact </a></li>
<li><a href="AboutMe.html"> About Me </a></li>
<li><a href="Business.html"> Business </a></li>
<li><a href="Street.html"> Street </a></li>
<li><a href="Nature.html"> Nature </a></li>
</ul>
<p id="logo"><a href="webpage.html"> Icyportraitsgta </a></p>
</div>
<div id="description">
<a href="#section02">section02<span>
</span></a>
<p class="para"> GTA Portrait photography <br> with your favourite themes </p>
</div>
<img src="sanafull15.jpeg" class="sana15" alt="sanafull15">
<img src="sanafulle.jpeg" class="sanafulle" alt="sanafulle">
<img src="qasside.jpeg" class="qasside" alt="qasside">
</section>
<section id="section02">
<img src="icysit.jpg" class="icysit" alt="icysit">
<img src="ravedited1.jpg" class="rav1" alt="rav1">
<img src="qassmoke1.jpeg" class="qas2" alt="qas2">
</section>
</body>
</html>关于javascript - 向下滚动按钮动画不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48870986/