javascript - 如何使用 jQuery 使单击的字母滚动到其相关的 html 容器

标签 javascript jquery html css

我正在尝试完成我的 wiki 页面，并希望实现以下功能。

当有人点击字母栏中的字母时，我希望浏览器滚动到 wiki 列中的相应字母(如果可能的话，使用一些流畅的动画)。

我最终遇到以下错误:

Wiki_app.js:8 Uncaught TypeError: Failed to execute 'scrollTo' on 'Window': parameter 1 ('options') is not an object.
    at HTMLDivElement.<anonymous> (Wiki_app.js:8)
    at HTMLDivElement.dispatch (jquery.min.js:2)
    at HTMLDivElement.v.handle (jquery.min.js:2)


$(".letterInBar").click(function() {
  let letter = $(this).html();
  console.log(letter);
  scrollTo(".letter").html(letter);
});
.headingWiki {
  font-family: 'Varela Round', sans-serif;
  font-weight: bold;
  color: #2E1A6D;
  font-size: 30px;
  margin-top: 30px;
  text-align: center;
  line-height: 35px;
}

.letterBar {
  position: relative;
  margin: auto;
  margin-top: 45px;
  display: inline-block;
  height: 30px;
  width: 100%;
  padding-left: 50%;
}

.letterWrapper {
  position: absolute;
  width: 50%;
  margin: auto;
  left: 50%;
  transform: translate(-50%);
}

.letterInBar {
  float: left;
  font-family: 'Varela Round', sans-serif;
  font-weight: bold;
  color: #2E1A6D;
  height: 100%;
  padding-right: 7px;
}

.letterInBar:hover {
  cursor: pointer;
  font-size: 30px;
  color: #30A36C;
  font-weight: bold;
}

.letter {
  font-family: 'Hind', sans-serif;
  color: #4D349C;
  font-weight: bold;
  font-size: 45px;
  padding-left: 5px;
  padding-top: 5px;
}

.listWrapper {
  position: relative;
  margin: auto;
  margin-top: 45px;
  width: 30%;
  background-color: #F7F7F7;
  border-radius: 15px;
}

.keyPairWrapper {
  padding-bottom: 5px;
  padding-left: 5px;
}

.Keyword {
  width: 280px;
  height: 2.2vh;
  font-family: 'Varela Round', sans-serif;
  font-weight: bold;
  background-color: #30A36C;
  color: #FFF;
  border-radius: 15px;
  padding-left: 10px;
  padding-top: 4px;
}

.Content {
  display: none;
  margin-top: 5px;
  margin-right: 5px;
  margin-left: 5px;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 8px;
  padding-right: 8px;
  line-height: 20px;
  background-color: #FFF;
  font-family: 'Varela Round', sans-serif;
  font-weight: bold;
  color: #2E1A6D;
  border: 1.5px solid;
  border-radius: 15px;
  border-color: #2E1A6D;
}

.Keyword:hover {
  cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<html>

<body>

<div class="letterBar">
  <div class="letterWrapper">
    <div class="letterInBar">A</div>
    <div class="letterInBar">B</div>
    <div class="letterInBar">C</div>
    <div class="letterInBar">D</div>
    <div class="letterInBar">E</div>
    <div class="letterInBar">F</div>
    <div class="letterInBar">G</div>
    <div class="letterInBar">H</div>
    <div class="letterInBar">I</div>
    <div class="letterInBar">J</div>
    <div class="letterInBar">K</div>
    <div class="letterInBar">L</div>
    <div class="letterInBar">M</div>
    <div class="letterInBar">N</div>
    <div class="letterInBar">O</div>
    <div class="letterInBar">P</div>
    <div class="letterInBar">Q</div>
    <div class="letterInBar">R</div>
    <div class="letterInBar">S</div>
    <div class="letterInBar">T</div>
    <div class="letterInBar">U</div>
    <div class="letterInBar">V</div>
    <div class="letterInBar">W</div>
    <div class="letterInBar">X</div>
    <div class="letterInBar">Y</div>
    <div class="letterInBar">Z</div>
  </div>
</div>

<div class="listWrapper">



  <div class="letter">A</div>

  <div class="keyPairWrapper">
    <div class="Keyword">Arbitrage</div>
    <div class="Content">The simultaneous purchase or sale of a financial product in order to take advantage of small price differentials between markets.</div>
  </div>

  <div class="keyPairWrapper">
    <div class="Keyword">Ask Price</div>
    <div class="Content">The ask price is the price at which the market (or your broker) will sell a specific currency pair to you. Thus, at the ask price you can buy the base currency from your broker.</div>
  </div>


  <div class="letter">B</div>

  <div class="keyPairWrapper">
    <div class="Keyword">Base Rate</div>
    <div class="Content">The lending rate of the central bank of any given country.</div>
  </div>


  <div class="keyPairWrapper">
    <div class="Keyword">Bears</div>
    <div class="Content">Not animals, but traders who expect prices to decline and may be holding short positions.</div>
  </div>

  <div class="keyPairWrapper">
    <div class="Keyword">Bid Price</div>
    <div class="Content">The bid is the price at which the market (or your broker) will buy a specific currency pair from you. Thus, at the bid price, a trader can sell the base currency to their broker.</div>
  </div>

  <div class="keyPairWrapper">
    <div class="Keyword">BOC</div>
    <div class="Content">The central bank of Canada</div>
  </div>

  <div class="keyPairWrapper">
    <div class="Keyword">BOE</div>
    <div class="Content">The central bank of England (UK)</div>
  </div>

  <div class="keyPairWrapper">
    <div class="Keyword">BOJ</div>
    <div class="Content">The central bank of Japan</div>
  </div>

  <div class="keyPairWrapper">
    <div class="Keyword">Broker</div>
    <div class="Content">Companies that act as an intermediary, bringing buyers and sellers together for a fee or commission. </div>
  </div>

  <div class="keyPairWrapper">
    <div class="Keyword">Bulls</div>
    <div class="Content">Not animals, but traders who expect prices to rise and therefor holding long positions.</div>
  </div>



  <div class="letter">C</div>



  <div class="letter">D</div>



  <div class="letter">E</div>

  <div class="keyPairWrapper">
    <div class="Keyword">Exchange Rate</div>
    <div class="Content">The value of one currency expressed in terms of another. For example, if GBP/USD is 1.5500, 1 Pound is worth US$ 1.5500.</div>
  </div>
  
  <div class="letter">F</div>


  <div class="letter">G</div>



  <div class="letter">H</div>


  <div class="letter">I</div>


  <div class="letter">J</div>


  <div class="letter">K</div>



  <div class="letter">L</div>

  <div class="keyPairWrapper">
    <div class="Keyword">Leverage</div>
    <div class="Content">Leverage is the ability to gear your account into a position greater than your total account margin. For instance, if a trader has $1,000 of margin in his account and he opens a $100,000 position, he leverages his account by
      100 times, or 100:1. Increasing your leverage magnifies both gains and losses. Different brokers off different leverage levels. Use them wisely. </div>
  </div>

 </body>
  
 </html>

最佳答案

您遇到的问题是因为 scrollTo(".letter").html(letter) 中的 .letter 不是您要尝试的正确选择器完成，也不是 scrollTo 方法的正确使用，该方法采用坐标而不是字符串作为参数，最后，您使用的“html”方法仅用于获取或设置 html 内容元素，没有一个 jquery 选择器返回一个带有给定文本作为其 html 内容的元素，所以你可以使用“filter”方法来代替，你也需要使用 jquery animate 方法来添加平滑的动画，就像这样:

$(".letterInBar").click(function() {
  let letter = $(this).html();

  let matchText = function() {
    return $(this).text() === letter;
  }

  $('html, body').animate({
        scrollTop: $(".letter").filter(matchText).offset() ? 
         $(".letter").filter(matchText).offset().top : null
   }, 2000);
});
.headingWiki {
  font-family: 'Varela Round', sans-serif;
  font-weight: bold;
  color: #2E1A6D;
  font-size: 30px;
  margin-top: 30px;
  text-align: center;
  line-height: 35px;
}

.letterBar {
  position: relative;
  margin: auto;
  margin-top: 45px;
  display: inline-block;
  height: 30px;
  width: 100%;
  padding-left: 50%;
}

.letterWrapper {
  position: absolute;
  width: 50%;
  margin: auto;
  left: 50%;
  transform: translate(-50%);
}

.letterInBar {
  float: left;
  font-family: 'Varela Round', sans-serif;
  font-weight: bold;
  color: #2E1A6D;
  height: 100%;
  padding-right: 7px;
}

.letterInBar:hover {
  cursor: pointer;
  font-size: 30px;
  color: #30A36C;
  font-weight: bold;
}

.letter {
  font-family: 'Hind', sans-serif;
  color: #4D349C;
  font-weight: bold;
  font-size: 45px;
  padding-left: 5px;
  padding-top: 5px;
}

.listWrapper {
  position: relative;
  margin: auto;
  margin-top: 45px;
  width: 30%;
  background-color: #F7F7F7;
  border-radius: 15px;
}

.keyPairWrapper {
  padding-bottom: 5px;
  padding-left: 5px;
}

.Keyword {
  width: 280px;
  height: 2.2vh;
  font-family: 'Varela Round', sans-serif;
  font-weight: bold;
  background-color: #30A36C;
  color: #FFF;
  border-radius: 15px;
  padding-left: 10px;
  padding-top: 4px;
}

.Content {
  display: none;
  margin-top: 5px;
  margin-right: 5px;
  margin-left: 5px;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 8px;
  padding-right: 8px;
  line-height: 20px;
  background-color: #FFF;
  font-family: 'Varela Round', sans-serif;
  font-weight: bold;
  color: #2E1A6D;
  border: 1.5px solid;
  border-radius: 15px;
  border-color: #2E1A6D;
}

.Keyword:hover {
  cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<html>

<body>

<div class="letterBar">
  <div class="letterWrapper">
    <div class="letterInBar">A</div>
    <div class="letterInBar">B</div>
    <div class="letterInBar">C</div>
    <div class="letterInBar">D</div>
    <div class="letterInBar">E</div>
    <div class="letterInBar">F</div>
    <div class="letterInBar">G</div>
    <div class="letterInBar">H</div>
    <div class="letterInBar">I</div>
    <div class="letterInBar">J</div>
    <div class="letterInBar">K</div>
    <div class="letterInBar">L</div>
    <div class="letterInBar">M</div>
    <div class="letterInBar">N</div>
    <div class="letterInBar">O</div>
    <div class="letterInBar">P</div>
    <div class="letterInBar">Q</div>
    <div class="letterInBar">R</div>
    <div class="letterInBar">S</div>
    <div class="letterInBar">T</div>
    <div class="letterInBar">U</div>
    <div class="letterInBar">V</div>
    <div class="letterInBar">W</div>
    <div class="letterInBar">X</div>
    <div class="letterInBar">Y</div>
    <div class="letterInBar">Z</div>
  </div>
</div>

<div class="listWrapper">



  <div class="letter">A</div>

  <div class="keyPairWrapper">
    <div class="Keyword">Arbitrage</div>
    <div class="Content">The simultaneous purchase or sale of a financial product in order to take advantage of small price differentials between markets.</div>
  </div>

  <div class="keyPairWrapper">
    <div class="Keyword">Ask Price</div>
    <div class="Content">The ask price is the price at which the market (or your broker) will sell a specific currency pair to you. Thus, at the ask price you can buy the base currency from your broker.</div>
  </div>


  <div class="letter">B</div>

  <div class="keyPairWrapper">
    <div class="Keyword">Base Rate</div>
    <div class="Content">The lending rate of the central bank of any given country.</div>
  </div>


  <div class="keyPairWrapper">
    <div class="Keyword">Bears</div>
    <div class="Content">Not animals, but traders who expect prices to decline and may be holding short positions.</div>
  </div>

  <div class="keyPairWrapper">
    <div class="Keyword">Bid Price</div>
    <div class="Content">The bid is the price at which the market (or your broker) will buy a specific currency pair from you. Thus, at the bid price, a trader can sell the base currency to their broker.</div>
  </div>

  <div class="keyPairWrapper">
    <div class="Keyword">BOC</div>
    <div class="Content">The central bank of Canada</div>
  </div>

  <div class="keyPairWrapper">
    <div class="Keyword">BOE</div>
    <div class="Content">The central bank of England (UK)</div>
  </div>

  <div class="keyPairWrapper">
    <div class="Keyword">BOJ</div>
    <div class="Content">The central bank of Japan</div>
  </div>

  <div class="keyPairWrapper">
    <div class="Keyword">Broker</div>
    <div class="Content">Companies that act as an intermediary, bringing buyers and sellers together for a fee or commission. </div>
  </div>

  <div class="keyPairWrapper">
    <div class="Keyword">Bulls</div>
    <div class="Content">Not animals, but traders who expect prices to rise and therefor holding long positions.</div>
  </div>



  <div class="letter">C</div>



  <div class="letter">D</div>



  <div class="letter">E</div>

  <div class="keyPairWrapper">
    <div class="Keyword">Exchange Rate</div>
    <div class="Content">The value of one currency expressed in terms of another. For example, if GBP/USD is 1.5500, 1 Pound is worth US$ 1.5500.</div>
  </div>
  
  <div class="letter">F</div>


  <div class="letter">G</div>



  <div class="letter">H</div>


  <div class="letter">I</div>


  <div class="letter">J</div>


  <div class="letter">K</div>



  <div class="letter">L</div>

  <div class="keyPairWrapper">
    <div class="Keyword">Leverage</div>
    <div class="Content">Leverage is the ability to gear your account into a position greater than your total account margin. For instance, if a trader has $1,000 of margin in his account and he opens a $100,000 position, he leverages his account by
      100 times, or 100:1. Increasing your leverage magnifies both gains and losses. Different brokers off different leverage levels. Use them wisely. </div>
  </div>

 </body>
  
 </html>

关于javascript - 如何使用 jQuery 使单击的字母滚动到其相关的 html 容器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58781245/

上一篇：html - 避免 HTML 网格中的无效 DIV

下一篇：css - 字体很棒，具有相同的 unicode

相关文章：

javascript - 在 Vue 中使用 v-for 处理 v-if 的正确方法

javascript - AngularJS 中 ng-bind、ng-bind-html、ng-bind-html-unsafe 之间的区别？

javascript - 如何模糊 iframe 弹出窗口的背景

javascript - 如何为应用程序创建外部链接 (PhoneGap)

Javascript `==` 永远不会尝试将其操作数转换为 false，但是？

javascript - jquery ui slider 在单击轨道时定位下一个数组

javascript - a.nodeName is undefined Jquery错误

javascript - 可折叠菜单需要在初始加载时关闭所有标题

html - 在 td 或 tr 元素上创建一个透明的 div

javascript - jQuery 滑动切换在双击时触发两次

©2024 IT工具网  联系我们