个人中心
gpt4 book ai didi

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

转载 作者：太空宇宙 更新时间：2023-11-04 05:45:11 25 4
gpt4 key购买 nike

我正在尝试完成我的 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/

25 4 0
文章推荐： css - 字体很棒，具有相同的 unicode
文章推荐： c - char getenv(const char *name); 的参数是什么？
文章推荐： c - 我刚刚设置的变量中 printf 期间的段错误
文章推荐： linux - Linux本地网络文件同步
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com