Aligning Page to a Specific Element Without Changing the DOM or Utilizing References

Question

Aligning Page to a Specific Element Without Changing the DOM or Utilizing References

My goal is to easily scroll to a specific element using #:

<a href="#element">Element</a>

<div name="element" />

While this method works effectively, it always takes me to the top of the element. I would prefer to have the element centered on the screen for the user.

I am a bit hesitant to rely on Javascript's scrollTo or other external libraries, as I will need this feature frequently. Since I am using React, I want to avoid overusing refs and slowing down my application. Ideally, I would like to achieve this using just HTML, but I'm open to using JavaScript as well. However, most of the solutions I have found involve modifying the DOM and/or using refs.

javascript html css reactjs

Answer 1

Answer №1

If you're looking for a more efficient method using just html/css, one approach is to utilize a hidden span within your div container. Here's an example:

html {
  scroll-behavior: smooth;
}
.space {
  width: 100%;
  height: 400px;
  background-color: blue;
}
#element {
  position: relative;
  top: -50vh;
  visibility: hidden;
}

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <a href="#element">Element</a>
  <div class="space"></div>
  <p> some text </p>
  <div class="space"></div>
  <p> some text </p>
  <div class="space"></div>
  <div>
    <p>
      Your element
    </p>
    <span id="element">anchor </span>
  </div>
  <div class="space"></div>
</body>
</html>

Answer 2

If you're looking for a more efficient method using just html/css, one approach is to utilize a hidden span within your div container. Here's an example:

html {
  scroll-behavior: smooth;
}
.space {
  width: 100%;
  height: 400px;
  background-color: blue;
}
#element {
  position: relative;
  top: -50vh;
  visibility: hidden;
}

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <a href="#element">Element</a>
  <div class="space"></div>
  <p> some text </p>
  <div class="space"></div>
  <p> some text </p>
  <div class="space"></div>
  <div>
    <p>
      Your element
    </p>
    <span id="element">anchor </span>
  </div>
  <div class="space"></div>
</body>
</html>

Answer 3

Answer №2

From my knowledge, achieving the desired effect without some JavaScript is not possible. For the "centered" aspect, it will require some calculations.

<html>
  <head>
    <title>Document</title>
    <style>
      .placeholder {
        height: 1000px;
      }
    </style>
    <script>
      function scrollToDest(event) {
        var id = event.target.getAttribute("href");
        if (id.charAt(0) !== "#") return; // not a valid <a> element
        var dest = document.getElementById(id.substr(1));
        if (!dest) return; // no destination found;

        event.preventDefault();
        // calculate the top and bottom margin remained when dest is centered
        var margin = window.innerHeight - dest.clientHeight;
        // what if the dest's height is larger than viewport?
        if (margin < 0) margin = 0;
        window.scroll({ left: 0, top: dest.offsetTop - margin / 2, behavior: "smooth" });
      }
    </script>
  </head>
  <body>
    <div class="placeholder">
      <a href="#dest" onclick="scrollToDest(event)">Let's go!</a>
    </div>
    <div id="dest">ARRIVAL</div>
    <div class="placeholder"></div>
  </body>
</html>

Answer 4

From my knowledge, achieving the desired effect without some JavaScript is not possible. For the "centered" aspect, it will require some calculations.

<html>
  <head>
    <title>Document</title>
    <style>
      .placeholder {
        height: 1000px;
      }
    </style>
    <script>
      function scrollToDest(event) {
        var id = event.target.getAttribute("href");
        if (id.charAt(0) !== "#") return; // not a valid <a> element
        var dest = document.getElementById(id.substr(1));
        if (!dest) return; // no destination found;

        event.preventDefault();
        // calculate the top and bottom margin remained when dest is centered
        var margin = window.innerHeight - dest.clientHeight;
        // what if the dest's height is larger than viewport?
        if (margin < 0) margin = 0;
        window.scroll({ left: 0, top: dest.offsetTop - margin / 2, behavior: "smooth" });
      }
    </script>
  </head>
  <body>
    <div class="placeholder">
      <a href="#dest" onclick="scrollToDest(event)">Let's go!</a>
    </div>
    <div id="dest">ARRIVAL</div>
    <div class="placeholder"></div>
  </body>
</html>

Aligning Page to a Specific Element Without Changing the DOM or Utilizing References

Answer №1

Answer №2

Similar questions

Determine if a cookie is set in Vue.js without requiring a page refresh

Resetting an array of refs in a React Native component

How to eliminate rows with images in Exceljs

Aligning images within a horizontal layout

I am unable to utilize NavLink unless it is within the confines of the <Router> component

Navigating and Displaying Views with React and Express

What is the method for adding the square root symbol to a button's value?

"Utilizing the Redux store for state management within Axios interceptors in

The journey of a JavaScript file within an iframe devoid of any src attribute

Using Promise to manipulate objects and arrays returned from functions

Show the output of a MySQL query on a modal, alert, or popup box within a webpage initiated by a search box, with the option to close the

Adjust the HTML 5 range slider to update according to the selected value

Angular application across multiple subdomains

Set font size for HTML elements based on different screen sizes in MaterialUI

The TD border is slicing through the div and is placed on the table in IE standards, causing it

The transparency of the navigation menu is perplexing to me. I am unclear as to the reasoning behind it. I desire a

Activate a side navigation bar in AdminLTE-3

What is the best way to ensure that this image is responsive and not overly tiny when viewed on Internet Explorer

Creating a dynamically generated JavaScript array using the JSON format

Switching from Bootstrap's traditional "loading" style progress bar to a more minimal dot style progress bar