Determine a person's vertical measurement with jQuery

Is there a way to determine the distance from the top of the page to where a link has been inserted?

For example, we can use the following code snippet to calculate the height of the window:

w = $(window).height();

I am interested in finding out how to calculate the height of an anchor tag as well.

<a href="#" id="calc"></a>

Specifically, I want to know the distance from the header to where that anchor is located.

outerh = $('#calc').outerHeight();
innerh = $('#calc').innerHeight();

After testing the above code, it seems to return a height of 18px, which appears to be the height of the anchor tag itself.

javascriptjqueryhtmlcss

Answer №1

To find the calculation, you can utilize the offset().top method.

This function retrieves the current coordinates of the initial element or assigns coordinates to each element within the matched set, all in relation to the document.

Check out this demo:

console.log($('#calc').offset().top);
body {
  margin:0;  
}

a {
  display:inline-block;
  margin-top:100px;
}
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<a href="#" id="calc">link</a>

Answer №2

Measure the distance from the top edge of an anchor tag to its top

distance_top= $('#calc').offset().top;

Calculate the height from the top edge of an anchor tag to its bottom

height_top= $('#calc').offset().top + $('#calc').outerHeight();

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

Unable to load XML in Chrome using JQuery

Can anyone explain why the code below works in Firefox but not Chrome? I'm currently testing it on my local machine. Thanks for any insights you can provide! <html> <head> <script type="text/javascript" src="jquery.js"> ...

jqueryhtmlxmlajax

Is it possible for a div element to maintain a fixed position even as its size changes

Looking to adjust the size of a ruler? In horizontal mode, the ruler expands and contracts as you resize it. However, in vertical mode, the ruler shifts left as you shrink it and right as you expand it. You can resize the ruler by dragging the small r ...

jqueryhtmlcsshtml5-canvas

The complete height of the website is concealed by the mobile toolbar/menu

I encountered a perplexing issue regarding the responsive resizing of a website on mobile devices. The problem arises when the full height extends over the toolbar/menu, unless the user manually hides the toolbar. Is there a way to dynamically resize the ...

javascripthtmlcssreactjsresponsive-design

CSS - Guidelines for Targeting Multiple Elements

My CSS code includes several commands that target similar elements, but the resulting design appears messy. I am seeking advice on a more effective way to select these elements in a conventional manner. Despite consulting documentation, I have resorted to ...

htmlcsscss-selectorsconventions

Switching from one Div to another simultaneously by sliding them out and sliding in the replacement Div

I have a situation with multiple divs within an HTML section. I'm looking for assistance in implementing a sliding effect on these div tags, either horizontally (left/right) or vertically (up/down), depending on user preference. The transition should ...

javascriptanimationhtmlslideshow

Is there a way to verify if the field has successfully passed validation?

When it comes to verifying user input using the jquery validate plugin, I also make use of the focusout event to capture interactions in the field: $('input[type="text"]').focusout(function() { ... }); However, I want to ensure that this action ...

jqueryjquery-validate

Utilizing a Promise in NodeJS and Express to effectively capture the writing functionality of the HTTP module

Currently, I am in the process of developing an Express application with the following components: NodeJS v8 express (latest version) As I delved into the workings of the onHeaders module and observed how it alters the HTTP headers, I became keen on lev ...

javascriptnode.jshttpexpress

Learn how to extract data located between two specific tags using Java HtmlUnit

<span> <a></a> Hello <div>A plethora of irrelevant text</div> </span> My goal is to retrieve only the "Hello" from the webpage. While I can use XPath to target the span, calling .getTextContent() also includes the text ...

javahtmlhtmlunit

Tips for accelerating the loading of data retrieved through ajax requests

At present, data is being fetched in array form from a PHP script. I have noticed that when retrieving 40 sets of data, it takes approximately 20 seconds for the data to load. This delay may be due to ajax having to wait until all the results are gathered. ...

javascriptphpjqueryajax

Utilizing the URLSearchParams object for fetching data in React

I've implemented a custom hook named useFetch: const useFetch = (url: string, method = 'get', queryParams: any) => { useEffect(() => { let queryString = url; if (queryParams) { queryString += '?' + queryParam ...

javascriptreactjs

Using two loops/arrays in JavaScript to generate a rating score

I want to create a simple rating component with the following appearance: ◼◼◼◻◻ (score: 3 out of 5) Here is my JSX code snippet: var score = 3; var range = 5; { [...Array(range)].map((e, i) => ( <div className="rating-item" ...

javascriptreactjs

Conceal multiple divs at the same time based on their largest dimension

I am facing an issue with two divs, each containing two nested divs: https://i.sstatic.net/QFMiU.png <div class="hide"> <div> Variable size </div> <div> Text1 (also variable size) </div&g ...

javascriptcssangularsass

Need help incorporating a "section trail" into your website's navigation sidebar using JS/jquery? Here's how you can do it!

My website is quite extensive and contains numerous elements. There are times when I find myself wanting to navigate back and forth between different sections of the page. I've noticed that some websites have a feature called a "page trail," which di ...

javascriptjqueryhtmlcss

Creating a radial gradient texture using CSS

I'm encountering an issue with my radial gradient and texture combination. Here is the code snippet I am using: background-image: url('../img/texture.png'); /* fallback */ background: -moz-radial-gradient(rgba(253,253,253,0.1) 0%, rgba(2 ...

css

Watching for changes to an object's value in an AngularJS service triggered by a controller from a separate module (Extended Edition)

Referring to this discussion on Stack Overflow: AngularJS trigger and watch object value change in service from controller The original question was about watching for changes in a service from a controller. I am interested in extending this concept to ...

javascripthtmlangularjs

How to incorporate a phone number input with country code using HTML

Can anyone help me create a phone number input field with a country code included? I've tried a few methods but haven't had much success. Here is the code I've been working with: <div class="form-group "> <input class= ...

javascripthtmlcssasp.net-core

JavaScript problem encountered when using the forEach() function on $el

I am encountering an issue where I am unable to access the element value inside the forEach() function var filtered = rawData.map(function(x){ return { state : x.state, active : x.active, deaths : x.de ...

javascriptarraysajaxweb

AngularJS: Issue with ngChange not being triggered from directive

A Summary of the Issue at Hand I've created a directive that dynamically displays a list of checkboxes. The directive has a parameter named options, which should be an array structured like this in order for the checkboxes to display correctly: var ...

javascripthtmlangularjsangularjs-directivefrontend

Retrieve data from the database at the optimal time interval, and halt the process once the data has been successfully received

I'm new to this, so please bear with me :) What is the easiest way to check for, fetch, and utilize newly received data from a MySQL database? The database is constantly updated through an external API. Ideally, I would like to capture the data as i ...

phpjavascriptjquerymysqllogic

Updating image on click in CSS and HTML

How can I change the image to display a different picture when clicked? I currently have a green image that, upon clicking, switches pages and transforms into a white image. Before Click https://i.sstatic.net/wBVCL.png After Click https://i.sstatic.net/Z ...

htmlcssnext.js