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

时间：2018-06-05 07:40:18

标签： html css navbar

我想让我的导航栏链接顺畅滚动到他们选择的链接（目的地）。问题是，它们只移动到目的地，而不是平滑滚动。有解决方案吗？不想使用Bootstrap，哪种 JQuery 代码可以实现平滑滚动？

＆＃13;
＆＃13; 
$('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;
    }
  }
});
＆＃13; 
.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;
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

这是我到目前为止尝试过的代码。

5 个答案:

答案 0 :(得分：1)

你需要添加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>

答案 1 :(得分：0)

您缺少对jQuery的引用。

添加

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

前

$('a[href*=#]:not([href=#])').click(function() {
...

答案 2 :(得分：0)

试试这个

更新了小提琴链接：https://jsfiddle.net/vinaykumar0459/1po7nfhy/22/ 

$('a').click(function(){
    $('html, body').animate({
        scrollTop: $( $(this).attr('href') ).offset().top
    }, 500);
    return false;
});

答案 3 :(得分：0)

更新了小提琴链接：https://jsfiddle.net/1po7nfhy/20/

首先需要jQuery并且您的选择器无效。 ＃是一个特殊字符，需要像

一样进行转义 
$('a[href*=\\#]:not([href=\\#])')

请参阅https://api.jquery.com/category/selectors/

答案 4 :(得分：0)

这适用于您所追求的目标（仅需要 JQUERY ）：

// Select all links with hashes
$('a[href*="#"]')
  // Remove links that don't actually link to anything
  .not('[href="#"]')
  .not('[href="#0"]')
  .click(function(event) {
    // On-page links
    if (
      location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') &&
      location.hostname == this.hostname
    ) {
      // Figure out element to scroll to
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
      // Does a scroll target exist?
      if (target.length) {
        // Only prevent default if animation is actually gonna happen
        event.preventDefault();
        $('html, body').animate({
          scrollTop: target.offset().top
        }, 1000, function() {
          // Callback after animation
          // Must change focus!
          var $target = $(target);
          $target.focus();
          if ($target.is(":focus")) { // Checking if the target was focused
            return false;
          } else {
            $target.attr('tabindex', '-1'); // Adding tabindex for elements not focusable
            $target.focus(); // Set focus again
          };
        });
      }
    }
  });
.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://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!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>

相关问题
最新问题