我一直在努力在我的网站上通过 div 制作一个平滑的滚动...我正在尝试做的是创建一个链接，将我链接到网站的另一部分。它有效，但它只是把我送到那里，我想让它更顺畅..
这是我的代码:
HTML
<html>
<head>
<title>I Am Martin</title>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div class="ask_box">
<div class="question">I Am</div>
<div class="box">
<a href="#"><span class="answer1">Martin</span></a>
</div>
<div class="scroll_down">
<a href="#try"><button class="btn_down"> ↓ </button></a>
</div>
</div>
<div id="try">
</div>
</body>
CSS
*{
margin: 0;
padding: 0;
}
.ask_box{
height: 100vh;
background: #cd3f43;
align-items: center;
justify-content: center;
display: flex;
font-size: 30px;
}
.question {
font-weight: 400;
font-family: sans-serif;
letter-spacing: 1px;
color: rgba(255, 255, 255, 0.85);
-webkit-font-smoothing: antialiased;
}
.boxes{
display: flex;
justify-content:space-between;
}
.answer1 {
border: 5px solid white;
border-radius: 5px;
color: #FFF;
font-size: 2em;
font-weight: 800;
display: inline-block;
margin-left: 5px;
padding: 0.3 0.8;
letter-spacing: 3px;
font-family: sans-serif;
outline: none;
background-color: #cd3f43;
}
.scroll_down{
position: absolute;
bottom: 0;
left: 50%;
right: 0;
justify-content: center;
align-items: center;
}
.btn_down{
height: 30px;
font-size: 0.6em;
font-weight: 800;
font-family: sans-serif;
letter-spacing: 1px;
color: rgba(255, 255, 255, 0.85);
-webkit-font-smoothing: antialiased;
outline: none;
background-color: #cd3f43;
border: 0;
}
#try{
height: 95vh;
background: #292929;
margin-left: 5px;
margin-right: 5px;
margin-top: 5px;
}
对不起，如果我的英语不完美......我希望你能理解!
谢谢
最佳答案
我使用了 CSS-Tricks 中的片段.将值 1000 更改为您的滚动计时要求。
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
}); * {
margin: 0;
padding: 0;
}
.ask_box {
height: 100vh;
background: #cd3f43;
align-items: center;
justify-content: center;
display: flex;
font-size: 30px;
}
.question {
font-weight: 400;
font-family: sans-serif;
letter-spacing: 1px;
color: rgba(255, 255, 255, 0.85);
-webkit-font-smoothing: antialiased;
}
.boxes {
display: flex;
justify-content: space-between;
}
.answer1 {
border: 5px solid white;
border-radius: 5px;
color: #FFF;
font-size: 2em;
font-weight: 800;
display: inline-block;
margin-left: 5px;
padding: 0.3 0.8;
letter-spacing: 3px;
font-family: sans-serif;
outline: none;
background-color: #cd3f43;
}
.scroll_down {
position: absolute;
bottom: 0;
left: 50%;
right: 0;
justify-content: center;
align-items: center;
}
.btn_down {
height: 30px;
font-size: 0.6em;
font-weight: 800;
font-family: sans-serif;
letter-spacing: 1px;
color: rgba(255, 255, 255, 0.85);
-webkit-font-smoothing: antialiased;
outline: none;
background-color: #cd3f43;
border: 0;
}
#try {
height: 95vh;
background: #292929;
margin-left: 5px;
margin-right: 5px;
margin-top: 5px;
}<html>
<head>
<title>I Am Martin</title>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div class="ask_box">
<div class="question">I Am</div>
<div class="box">
<a href="#"><span class="answer1">Martin</span></a>
</div>
<div class="scroll_down">
<a href="#try">
<button class="btn_down">↓</button>
</a>
</div>
</div>
<div id="try">
</div>
</body>关于javascript - 流畅的向下滚动链接，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31257034/