Guide on using jQuery to automatically scroll to the HTML container related to a clicked letter

I am in the process of finalizing my wiki page and I wish to add a specific function.

My goal is that when a user clicks on a letter in the alphabet bar, the browser will smoothly scroll to the corresponding letter within the wiki column. However, I am encountering 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>

javascriptjqueryhtmlcss

Answer №1

The issue you are encountering arises from the fact that the selector .letter in scrollTo(".letter").html(letter) is not suitable for your intended purpose. Additionally, the usage of the scrollTo method is incorrect as it requires coordinates instead of a string as parameters. Moreover, the 'html' method you have employed is specifically designed for getting or setting the HTML content of an element. There isn't a jQuery selector that directly returns an element based on its HTML content, so you could utilize the "filter" method instead. Furthermore, incorporating the jQuery animate method will enable smooth animation effects. Here's an alternative implementation:

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

/* Additional CSS classes omitted for brevity */ 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<html>

/* HTML code structure with elements and styling */

</html>

Answer №2

The dot is missing in your jQuery selector:

$("letterInBar")

it should be

$(".letterInBar")

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the correct way to reference this data element in Ajax?

I am attempting to retrieve the elevation data for 732 meters from the JSON API response below: {"results":1,"data":[{"wind":{"degrees":200,"speed_kts":6,"speed_mph":7,"speed_mps":3,&quo ...

javascriptjqueryjsonajax

Is there a way to pre-load images from component B within component A using Vue?

In a scenario where I have two Vue files, A.vue and B.vue, the issue arises when navigating from A to B. B contains numerous images fetched from Firebase realtime database, resulting in slow loading times upon first visit. To address this, I aim to preload ...

javascriptasynchronousvue.jspreload

Ensure that the div is styled with a white background and positioned next to another div with a right margin

I have a white-colored div that needs to be positioned next to another element on a webpage. Additionally, I need a paragraph placed on top of this div for information purposes. Please refer to the following link to see what I am trying to achieve: https:/ ...

htmlcss

Choose the descendant element of the element that has a specific attribute

One of the issues I am facing is related to a button with a span tag inside for the text. Occasionally, this button might be disabled, and my goal is to have it appear grey when in that state. However, I am encountering difficulties making this work proper ...

csshtmlattributescss-selectors

Ways to extract the value from a jQuery object

How can I retrieve the selected time value using a jQuery plugin and save it on a specific input element within the page? Refer to the plugin and code provided below: http://jsfiddle.net/weareoutman/YkvK9/ var input = $('#input-a'); input.cloc ...

javascriptjquery

An unexpected problem with text redirection that should not be happening

I am facing an issue with my HTML text field and post button on my website. Whenever I click the post button to make a post, it redirects to a separate PHP file called post.php which handles PHP and MySQL code for posting. However, I want to avoid this red ...

javascriptphphtml

Capturing the input value from a text box within a table cell, saving it in an array using Javascript, and then transmitting it back

I have a PHP-generated table displayed on my website. The table consists of two rows - the first row contains headers, and the second row contains text boxes inside each cell. My goal is to allow users to input values into these text boxes, then retrieve t ...

javascriptphpjqueryajaxhtml-table

Having difficulty accessing information from a webservice on the Ionic1 framework

I am a beginner with the ionic1 framework and currently working on a sidemenu ionic app. My goal is to fetch a list of playlists from a Mysql Database. I attempted to do this in my controller.js : .controller('PlaylistsCtrl', function($scope,$ ...

phphtmlmysqlangularjsionic-framework

What techniques can be applied to utilize JSON data in order to dynamically create menu components using the map method?

My current challenge involves dynamically generating a set of menu items using data retrieved from a JSON file. I've attempted to achieve this by mapping the values with props, but it seems like I'm overlooking something. Below is the code snipp ...

javascriptarraysjsonreactjs

How to incorporate a partial with jQuery in a Rails application

I've been working on setting up a navigation bar for my homepage that loads a partial into a div element when the user clicks on the links. I found this helpful post and made some modifications to fit my needs: Rails 3 - link_to to call partial using ...

ruby-on-railsajaxjquery

Showing text instantly upon clicking a radio button, in real-time

I'm working with a set of radio buttons that are linked to numbers ranging from 1 to 24. I need to show the selected number in another part of the page when a radio button is clicked. What would be the best way to achieve this? ...

javascripthtml

Using the input method in JavaScript cannot extract an object property

Recently, I have been working with this JavaScript code provided below. It is essential for me to retrieve the votecount for a game based on user input. function Game(gamename,votes) { this.gamename = gamename; this.votes = votes; }; var lol = ne ...

javascripthtmlvariablesobject

Utilize a function or array to send various data with an Ajax post request

Hey, I'm on the hunt for a more efficient method to send data using ajax to php for multiple users. Take a peek at my code below: $(document).ready(function(){ $("#all").click(function(){ document.getElementById('babon').click(); ...

javascriptjqueryajax

Invoke a class method once the Promise has been successfully resolved

I'm facing an issue with my simple class class A{ constructor(){ this.loadComponents().then(function(values) {callbackOnLoad();}); } callbackOnLoad(){ //do some things } loadComponents(){ ... return Promise.all([p1,p2,p3,p4,p ...

javascriptes6-promise

streamlining form updates in vue

The code snippet provided is functional but unnecessarily complicated and lengthy. I am seeking a more efficient approach to achieve the desired outcome. <h6><label for="number">Change Number</label></h6> ...

javascriptnode.jsbackendnode-modules

Tips for eliminating the border radius on select box elements within Bootstrap

I am currently using bootstrap v3.3.1 from the standard directory, and I am facing difficulty in removing the border radius from the select box components specifically in Google Chrome. This particular inquiry is unique because: Despite attempting to mo ...

htmlcsstwitter-bootstrap

Is it possible to automatically set focus on the input box in an html tag multiple times instead of just once with autofocus?

Currently, I am developing an online editor that allows users to quickly edit individual words. My approach involves replacing specific words with input boxes containing the word for direct editing by users. In order to streamline the process and ensure e ...

javascripthtmlangular

What is the best way to send a form value to a servlet?

As someone who is relatively new to programming, I kindly ask for your patience with me. I am currently attempting to extract values from a form (embedded in a JSP) using JavaScript, and then make a post request to a servlet. The form consists of 6 differ ...

javajavascriptajaxjspservlets

Combining react-md with material-ui components: A step-by-step guide

Is it possible to combine react-md and material-ui components together? I am attempting to utilize components from both libraries, however they seem to conflict with each other's styles. Do you have any suggestions or solutions? ...

javascriptreactjsmaterial-ui

jQuery used to create a variety of animations that are activated by scrolling

I have created a function that fades a specific DIV when it scrolls into view. Within these DIVs, I have child elements that I want to animate at the end of each fade animation. How can I incorporate additional functions within the existing function below? ...

jqueryeventsanimationtriggersonscroll