【发布时间】：2018-06-05 16:47:23
【问题描述】：
我想让我的导航栏链接平滑滚动到他们选择的链接（目的地）。问题是，它们只移动到目的地，而不是平滑滚动。有解决办法吗？不想用Bootstrap，什么样的JQuery代码可以实现这个平滑滚动？
$('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
}, 1500);
return false;
}
}
});.topnav a {
color: black;
text-decoration: none;
font-style: bold;
font-size: 20px;
font-family: Cabin;
padding-left: 20px;
padding-right: 20px;
}
.column {
float: left;
width: 25%;
}
/* Clear floats after rows */
.row:after {
content: "";
display: table;
clear: both;
padding: 8px;
}
/* Content */
.content {
background-color: white;
padding: 10px;
}
.topnav {
float: right;
padding-top: 20px;
}
.About {
padding: 20px;
text-align: center;
font-style: bold;
font-size: 20px;
font-family: Cabin;
}
p {
font-size: 16px;
font-family: Lora;
padding: 20px;
}
h3 {
color: white;
font-family: Cabin;
}
body,
html {
height: 100%;
position: relative;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: 0;
padding: 0;
}
.bg {
/* The image used */
position: relative;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: url("house.jpg");
opacity: 0.80;
filter: alpha(opacity=80);
/* For IE8 and earlier */
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 traditional//EN">
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=`device-width`, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href='https://fonts.googleapis.com/css?family=Cabin:700' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css">
</head>
<body>
<div class="bg">
<div class="topnav">
<a class="active" href="#Home">Home</a>
<a href="#Portfolio">Portfolio</a>
<a href="#Contact">Contact</a>
<a href="#About">About</a>
</div>
</div>
<div class="About">
<h1 id="About">About Cabin</h1>
<p>Cabin is a website theme I created to demonstrate my skills as a front-end web developer. This website uses stock photos free of property and commercial rights.
<h1 id="Portfolio">Portfolio</h1>
</p>
<div class="row">
<div class="column">
<div class="content">
<img src="picOne.jpg" alt="" style="width:100%">
<h3>My Work</h3>
<p>Lorem ipsum..</p>
</div>
</div>
<div class="column">
<div class="content">
<img src="picTwo.jpg" alt="" style="width:100%">
<h3>My Work</h3>
<p>Lorem ipsum..</p>
</div>
</div>
<div class="column">
<div class="content">
<img src="picThree.jpg" alt="" style="width:100%">
<h3>My Work</h3>
<p>Lorem ipsum..</p>
</div>
</div>
<div class="column">
<div class="content">
<img src="picFour.jpg" alt="" style="width:100%">
<h3>My Work</h3>
<p>Lorem ipsum..</p>
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="content">
<img src="picOne.jpg" alt="" style="width:100%">
<h3>My Work</h3>
<p>Lorem ipsum..</p>
</div>
</div>
<div class="column">
<div class="content">
<img src="picTwo.jpg" alt="" style="width:100%">
<h3>My Work</h3>
<p>Lorem ipsum..</p>
</div>
</div>
<div class="column">
<div class="content">
<img src="picThree.jpg" alt="" style="width:100%">
<h3>My Work</h3>
<p>Lorem ipsum..</p>
</div>
</div>
<div class="column">
<div class="content">
<img src="picFour.jpg" alt="" style="width:100%">
<h3>My Work</h3>
<p>Lorem ipsum..</p>
</div>
</div>
</div>
</div>
</body>
</html>这是我迄今为止尝试过的代码。
【问题讨论】：
-
我建议你使用 jQuery.animate()。它带有 3 个内置缓动函数，但您可以手动添加其他函数。