Javascript jQuery滚动到div-won'；不滚动，只跳_Javascript_Jquery_Html_Twitter Bootstrap

Javascript jQuery滚动到div-won'；不滚动，只跳

javascript jquery html twitter-bootstrap

Javascript jQuery滚动到div-won'；不滚动，只跳,javascript,jquery,html,twitter-bootstrap,Javascript,Jquery,Html,Twitter Bootstrap,我知道以前有人问过这个问题，但无论我在答案中尝试了多少链接和演示，我都无法让它起作用请看一看: <!DOCTYPE html> <html lang="en"> <head>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

我知道以前有人问过这个问题，但无论我在答案中尝试了多少链接和演示，我都无法让它起作用

请看一看:

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    <link rel="stylesheet" href="css/custom.css">
  </head>
  <body>

<div class="jumbotron jumbotron-fluid">
  <div class="container container-fluid hiimorsi">

<a href="#about"><img src="img/arrow-211-64.png" class=" d-block img-fluid"></a>
</div>
</div>

 <script src="app.js" type="text/javascript"></script>
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

  </body>

正如您所看到的，我正在使用引导（这是第一次），想知道这是否会弄乱代码

非常感谢。

这是因为您将

作为href值

<a href="#about">
 <img src="img/arrow-211-64.png" class=" d-block img-fluid">
</a>

发生的情况是，当单击时，它会跳转到浏览器的顶部

改为：

<a>
  <img src="img/arrow-211-64.png" class=" d-block img-fluid">
</a>

为什么不使用jquery动画效果呢

    <script type="text/javascript">
      (function(){
            $("#arrow").on("click", function (e) {
                let scrollToPos = document.querySelector('.hello').offsetTop;
                $('body').animate({scrollTop: scrollToPos },500,'linear');

            });
      })();
    </script>


（功能（）{
$（“#箭头”）。在（“单击”上，函数（e）{
让scrollToPos=document.querySelector（'.hello'）.offsetTop；
$（'body'）。设置动画（{scrollTop:scrollToPos}，500，'linear'）；
});
})();

不确定，但相信

scrollIntoView

原生效果没有任何动画/轻松效果，但它的工作是以原生方式跳转到该项目。但是不要引用我的话：-）

为什么要包含两次jQuery？这是完整的html吗？无法查看

.hello

元素。为什么要使用'document.querySelector（'.hello'）`而不是jQuery的选择器？抱歉，不是完整的代码。我已经用完整的代码创建了一个fiddler：我刚刚尝试了这个，但仍然不起作用-它跳转到特定的部分，而不是缓慢地向下滚动到它。你能在《小提琴手》里看一下吗？提前感谢。您可能也需要jquery轻松？？但会有快速查看：-）没有点击的迹象，如果我点击有趣的链接，我会得到一个模态弹出没有滚动？？？箭头图像应该在引用下面（布兰妮的引用是一个笑话，希望很清楚），它不会出现，因为我没有上传图像到fiddler。如果你将鼠标悬停在它上面，你可以看到它链接到#关于哪张是第一张卡（为什么是成长部落），它的id是“关于”，我想这是因为你使用了散列方式并覆盖了它，但这里的任何方式都是一个简单的代码笔示例#about是指id为“about”的div-我在您的情况下使用它是错误的吗？？？@Orsi很好，因为您希望平滑滚动，所以使用

#about

是不对的。如果单击带有href

#about

的元素，它将立即跳转到该元素。

    <script type="text/javascript">
      (function(){
            $("#arrow").on("click", function (e) {
                let scrollToPos = document.querySelector('.hello').offsetTop;
                $('body').animate({scrollTop: scrollToPos },500,'linear');

            });
      })();
    </script>