Question

我想在点击按钮后滚动页面到某个ID。我尝试过的每个插件都不起作用：

Js Code Snippet

＆＃13;

$(document).ready(function() {
  $("#province-toggle-wrapper").click(function() {
    alert("Some alert"); //<--- alert triggers
    $('html, body').animate({
      scrollTop: $("#profile-filter").offset().top
    }, 2000);
  });

  /*$("#province-toggle-wrapper").click(function() {
		    alert("Some alert");  //<--- alert triggers
	        $('body').scrollTo('#profile-filter');
	    });*/
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://raw.githubusercontent.com/flesler/jquery.scrollTo/master/jquery.scrollTo.min.js"></script>
<div id="profile-filter" class="container-fluid">
  ABC
  <div id="province-toggle-wrapper">
    DEF
  </div>
</div>

＆＃13;

表单jQuery.scrollTo()插件 - 此solutions中的前2个方法。我错了什么？

Answer 1

＆＃13;

$("#profile-filter").click(function() {
    $('html, body').animate({
        scrollTop: $("#container2").offset().top
    }, 4000);
    return false;
});

$("#province-toggle-wrapper").click(function() {
    $('html, body').animate({
        scrollTop: $("#container1").offset().top
    }, 4000);
     return false;
});

＆＃13;

#container1{
    height:600px;
    width:100%;
    background:#879655;
}

#container2{
    height:600px;
    width:100%;
    background:#906354;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="container1">
    <a href="" id="profile-filter">Go to 2nd Container</a>
</div>

<div id="container2">
    <a href="" id="province-toggle-wrapper">Go to top</a>
</div>

＆＃13;

请检查此代码段。我只包含jquery库文件，没有其他插件。

Answer 2

你的问题是使用jQuery slim版本。

“苗条”版本不包含动画和ajax等多种功能缺少的函数是listed here。

Answer 3

您可以使用解决方案https://jsfiddle.net/Lh5mcLn7/

＆＃13;

$(document).ready(function() {
  $("#province-toggle-wrapper").click(function() {
    $('html, body').animate({
      scrollTop: $("#profile-filter").offset().top
    }, 2000);
  });
});

＆＃13;

#province-toggle-wrapper{
  height: 1000px;
  background: rgba(0,0,0,0.5);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="profile-filter" class="container-fluid">
  ABC
  <div id="province-toggle-wrapper">
    DEF
  </div>
</div>

＆＃13;

删除所有库，只需保留jQuery（jquery.min.js）。

Answer 4

您缺少准备好jquery的文档。尝试将您的代码置于：

之间

290289632 290289644 100 290289644 100

在这里你对使用scrollto有一个很好的解释： w3Schools

scrollTop无法正常工作

4 个答案: