將動畫鏈接滾動到div

Question

因此，我正在尋找一種方法，可在單擊鏈接后將平滑的滾動動畫播放到div上。 我已經在網上嘗試了一些教程，但是無法正常工作。 鏈接的ID為“ knop”，而我要滾動到的div的ID為“ over”

<!DOCTYPE html>
<!--gemaakt door Timo Vossen D01-->
<html>
<head>
  <title>Home</title>
  <meta name="keywords" content=""/>
  <meta name="author" content="Timo Vossen"/>
  <meta name="description" content=""/>
  <meta charset="UTF-8"/>
  <link rel="stylesheet" href="home.css" />
  <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
</head>

<body>
  <div id="menu">
    <img src="img/logo.png" alt="aston martin logo" class="logo"/>
    <img src="img/logo2.png" alt="vanquish logo" class="logo"/>
  </div>
  <div id="header">
    <div id="pijl">
      <a id="knop" href="#over"><img src="img/pijl.png" alt="pijl" id="pijlfoto"/></a>
    </div>
  </div>
  <div id="over">
  </div>
  <div id="specs">
    <div class="laag">
    </div>
  </div>
  <div id="peformance">
  </div>
  <div id="slider">
    <div class="laag">
    </div>
  </div>
  <div id="footer">
  </div>
</body>
</html>

Answer 1

如果您可以將jquery添加到您的網站，請嘗試此操作。

$(function() {
  $('#knop').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;
      }
    }
  });
});

來源： https : //css-tricks.com/snippets/jquery/smooth-scrolling/

更新

您的任務的更具體的代碼

$(function() {

  $('#knop').click(function() {
      var offsetTop = $('#over').offset().top;

      if (offsetTop) {
        $('html,body').animate({
          scrollTop: offsetTop
        }, 1000);

        return false;
      }
  });

});

PS感謝@ david-li的提示

將動畫鏈接滾動到div

問題描述

1 個解決方案

解決方案1
0 已采納 2015-10-10 18:32:36

將動畫鏈接滾動到div

問題描述

1 個解決方案

解決方案1 0 已采納 2015-10-10 18:32:36

解決方案1
0 已采納 2015-10-10 18:32:36