Question

我正在使用HTML，CSS和JavaScript构建一个非常基本的定价计算器。现在，用户可以通过单击每个响应的按钮来呈现各种问题。我在一个HTML页面中拥有整个内容，并且希望每次单击该按钮都可以滚动到下一个问题，因为它与他们的选择相对应。

除了滚动（我通过在HTML中使用s和分配的ID而做了一个笨重的版本...我希望改进），我正在运行此函数来为运行的整个计算器添加一个数字沿着整个事物的头部。

//fcn to add value to current total function 
addValue(addend){
//add addend to totalCost
totalCost = totalCost + addend;
//update cost span with new cost
document.getElementById("cost").innerHTML = totalCost;}

添加功能正常。。。直到我开始尝试添加我在w3学校找到的滚动功能。我认为我的HTML文档中的标题信息有误，但我不知道。坦率地说，我真的很困惑，因为我对此很陌生，它真的可以是任何东西！这是我目前的标题：

<header>

<link rel="stylesheet" href="pricingSorter.CSS">
<script src="Pricingsorter.js"></script>
<script type="text/javascript" src="Pricingsorter.js"></script>
<script>
$(document).ready(function(){
  // Add smooth scrolling to all links
  $("a").on('click', function(event) {

    // Prevent default anchor click behavior
    event.preventDefault();

    // Store hash
    var hash = this.hash;
    $('html, body').animate({
      scrollTop: $(hash).offset().top
    }, 800, function(){
      window.location.hash = hash;
    });
  });
});
</script>
</header>

当我添加此内容时，没有任何反应。滚动不起作用（虽然我已将文档全部连接起来，并且在我开始搞乱它之前添加以前工作成本的功能也不再适用... ... :(

我试图对问题进行彻底的描述，我真的可以使用一些帮助！

Answer 1

有几件事情，首先它应该是<head>而不是<header>，你还需要确保包含jQuery库，你可以在https://jquery.com/上找到关于它的大量文档。一旦包含库（它应该包含在滚动脚本之前），jQuery对象将以jQuery而不是$的形式提供。 $只是简写，可以像这样使用：

(function($){
  //all your stuff that uses $ should be in here
})(jQuery);

JS onClick事件在页面上滚动以及调用另一个函数

1 个答案: