html - 为什么网页不能平滑滚动？

标签 html css navbar

我想让我的导航栏链接平滑滚动到他们选择的链接(目的地)。问题是，它们只会移动到目的地，而不是平滑滚动。有解决办法吗？不想使用 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 以便滚动平滑，检查它

$('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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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.
</p>
<h1 id="Portfolio">Portfolio</h1>
<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>

关于html - 为什么网页不能平滑滚动？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50694673/

上一篇：css - 在移动设备上将列内的文本居中

下一篇：javascript - 单击和悬停的连续 CSS 效果

相关文章：

javascript - 使用 createElement 将新段落添加到现有段落并保持相同的 css

html - 如何对齐多个表单元素？

javascript - 出现 <div> 应该将下面的图像向下推

javascript - 导航栏品牌标志问题

html - 在 Bootstrap 列内创建页脚

javascript - html 中用于更改 css 图像标签的按钮功能？

javascript - 让javascript在任何链接上工作

html - CSS stretch bg 图像在 IE 中不起作用

jquery - 内联显示 div 元素

css - Bootstrap 4 导航栏不会在 Angular4 中崩溃

©2024 IT工具网  联系我们