How to make a clicked letter scroll to its related html container using jQuery

Question

I am trying to finalize my wiki page and would like to implement the following function.

When someone clicks on a letter in the alphabet bar I would like the browser to scroll to its corresponding letter within the wiki column (if possible with some smooth animation).

I end up with the following error:

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>

score 1 · Accepted Answer · answered Nov 09 '19 at 17:26

The problem you are having is because .letter in scrollTo(".letter").html(letter) is not a proper selector for what you are trying to accomplish, also is not the correct use of scrollTo method which takes coordinates instead of a string as it parameters, lastly, the 'html' method you are using is just for getting or setting the html content of an element, there isn't a jquery selector that returns an element with a given text as its html content, so you could use the "filter" method instead, also you would need to use the jquery animate method to add smooth animation, like this:

$(".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>

score 0 · Answer 2 · answered Nov 09 '19 at 16:30

0

You forgot the dot in your jQuery selector:

$("letterInBar")

should be

$(".letterInBar")

answered Nov 09 '19 at 16:30

Tess

140
10

Fixed, thanks. Now i have the following error: `Wiki_app.js:8 Uncaught TypeError: Failed to execute 'scrollTo' on 'Window': parameter 1 ('options') is not an object. at HTMLDivElement. (Wiki_app.js:8) at HTMLDivElement.dispatch (jquery.min.js:2) at HTMLDivElement.v.handle (jquery.min.js:2)` – Jonas Nov 09 '19 at 16:32
I can't find scrollTo in the jQuery documentation. Are you trying to use the method described here: https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo ? If so, you can't use a jQuery object as an argument. Instead, you'll need to get the coordinates of the object first and then pass those to the scrollTo method. – Tess Nov 09 '19 at 16:40
Or use [Element.scrollIntoView](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView) – radulfr Nov 09 '19 at 16:43
i referred to the second answer of this SO: https://stackoverflow.com/questions/6677035/jquery-scroll-to-element – Jonas Nov 09 '19 at 16:43

How to make a clicked letter scroll to its related html container using jQuery

2 Answers2