Anchor Not to Top of Page, But 200Px Down

Anchor not to top of page, but 200px down

Dirty solution for this but does work, thanks @SteveJenkins for coming up with this, though I added a tweak.

<a name="AnchorName" class="anchor">anchor text [invisible]</a>

.anchor {
   position: relative;
   top: -[number]px;
   visibility:hidden;
}

Make anchor link go some pixels above where it's linked to

window.addEventListener("hashchange", function () {
    window.scrollTo(window.scrollX, window.scrollY - 100);
});

This will allow the browser to do the work of jumping to the anchor for us and then we will use that position to offset from.

EDIT 1:

As was pointed out by @erb, this only works if you are on the page while the hash is changed. Entering the page with a #something already in the URL does not work with the above code. Here is another version to handle that:

// The function actually applying the offset
function offsetAnchor() {
    if(location.hash.length !== 0) {
        window.scrollTo(window.scrollX, window.scrollY - 100);
    }
}

// This will capture hash changes while on the page
window.addEventListener("hashchange", offsetAnchor);

// This is here so that when you enter the page with a hash,
// it can provide the offset in that case too. Having a timeout
// seems necessary to allow the browser to jump to the anchor first.
window.setTimeout(offsetAnchor, 1); // The delay of 1 is arbitrary and may not always work right (although it did in my testing).

NOTE:
To use jQuery, you could just replace window.addEventListener with $(window).on in the examples. Thanks @Neon.

EDIT 2:

As pointed out by a few, the above will fail if you click on the same anchor link two or more times in a row because there is no hashchange event to force the offset.

This solution is very slightly modified version of the suggestion from @Mave and uses jQuery selectors for simplicity

// The function actually applying the offset
function offsetAnchor() {
  if (location.hash.length !== 0) {
    window.scrollTo(window.scrollX, window.scrollY - 100);
  }
}

// Captures click events of all <a> elements with href starting with #
$(document).on('click', 'a[href^="#"]', function(event) {
  // Click events are captured before hashchanges. Timeout
  // causes offsetAnchor to be called after the page jump.
  window.setTimeout(function() {
    offsetAnchor();
  }, 0);
});

// Set the offset when entering page with hash present in the url
window.setTimeout(offsetAnchor, 0);

JSFiddle for this example is here

anchor element linking to another section of the same page jumps too far down

Try 'scroll-padding-top' CSS property:

html {
  scroll-padding-top: 100px; <-- replace with height of your position: fixed navbar
}

https://getpublii.com/blog/one-line-css-solution-to-prevent-anchor-links-from-scrolling-behind-a-sticky-header.html

Fixed page header overlaps in-page anchors

I had the same problem.
I solved it by adding a class to the anchor element with the topbar height as the padding-top value.

<h1><a class="anchor" name="barlink">Bar</a></h1>

I used this CSS:

.anchor { padding-top: 90px; }

How to fix my anchor link issue

Set z-index parameter to -1. Having it with a high value his puts your div over the others and will be floated over the others.-1 Will set it in a z-ordering less than trhe others. You can also remove it completely if you don't care about specific z-ordering betheen divs in code.

UPDATE: Fixed position will also cause your div to be "anchored" in a place of the page, and be expanded without "pusing" the others. Please also consider changing CSS position element value (http://www.w3schools.com/css/css_positioning.asp).

Smooth scrolling when clicking an anchor link

No need any js just use scroll-behavior: smooth at html tag Thats it

html{
scroll-behavior: smooth;
}

Scroll with anchor without # in URL

Take this answer from Jeff Hines using jQuery's animate:

function goToByScroll(id){
    $('html,body').animate({scrollTop: $("#"+id).offset().top},'slow');
}

If you're using jQuery don't forget to add the library to your project.

Edit: Also, make sure that you still "return false;" in the click handler for the link, otherwise it'll still add the "#div1" to your URL (thanks @niaccurshi)

Clicking on anchor links only works sometimes

Here are two things you might want to do to fix the problem.

1. Style your a tag so it takes full width/height (easier to click)
2. Change pointer-events: all to pointer-events: auto, since all is only for SVG (See: https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events).

// For test only
document.querySelectorAll('.dropdown a').forEach(link => {
  link.addEventListener('click', (e) => {
    e.preventDefault()
    console.log('clicked')
  })
})

nav {
  position: sticky;
  top: -20px;
}

.dropdown {
  width: auto;
  height: auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.Python,
.cPP {
  position: relative;
  width: 500px;
  margin-top: 20px;
}

.Python ul,
.cPP ul {
  position: absolute;
  margin-top: 10px;
  width: 200px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
  list-style: disc;
  border: 4px solid white;
  border-radius: 5px;
  background-color: rgb(86, 114, 117);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-15px);
  transition: all 0.4s ease;
}

.Python li,
.cPP li {
  background-color: rgb(216, 192, 147);
  width: 100%;
  height: 100%;
  border: 1px solid black;
  border-radius: 2px;
  align-items: center;
  line-height: 1.3rem;
}

.Python li:hover,
.cPP li:hover {
  background-color: rgb(207, 151, 46);
  transition-duration: 0.5s;
  pointer-events: all;
}

.Python a,
.cPP a {
  color: black;
  text-decoration: none;
  font-size: 0.5em;
}

.home a {
  font-size: 1.0em;
  align-items: center;
}

.home a:hover {
  color: rgb(24, 218, 208);
  transition-duration: 0.4s;
}

.dropdown button {
  background: rgb(51, 51, 51);
  color: rgb(255, 255, 255);
  width: 100%;
  font-size: 1.2em;
  cursor: pointer;
  padding: 5px;
  border-color: turquoise;
}

.dropdown button:hover {
  color: rgb(132, 255, 243);
  border-color: rgb(255, 145, 0);
  transition-duration: 0.4s;
}

.Python button:focus+ul,
.cPP button:focus+ul {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0px);
}

/* Code added */
.dropdown ul li a {
  display: block;
}

<nav>
  <div class="dropdown">
    <div class="home">
      <a href="../index.html">Home</a>
    </div>
    <div class="Python">
      <button>Python</button>
      <ul>
        <li><a href="../1DKinematics/1DKinematics.html"> 1-D Kinematics</a></li>
        <li><a href="./pendulumFriction.html"> Damped Pendulum</a></li>
        <li><a href="./drivenPendulum.html"> Driven Pendulum</a></li>
        <li><a href="./elasticPendulum.html"> Elastic Pendulum</a></li>
        <li><a href="./doublePendulum.html"> Double Pendulum</a></li>
        <li><a href="./elasticDoublePendulum.html"> Elastic Double Pendulum</a></li>
        <li><a href="./RKvsEC.html"> Runge-Kutta vs. Euler-Cromer </a></li>
        <li><a href="../oceanography/bobInWater.html"> Dynamics of Body in the Ocean </a></li>
      </ul>
    </div>
    <div class="cPP">
      <button>C++</button>
    </div>
  </div>
</nav>

How to hide Anchor icon when jump to specific part of page

$( ".scroll-regform" ).click(function() {
  $(this).addClass('hideIcon')
});

.scroll-regform, .mobile {
    display: block!important;
}
.scroll-regform {
    right: 44%;
    top: 200px;
    cursor: pointer;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    z-index: 3;
    line-height: 30px;
    text-align: center;
    font-size: 28px;

}
.scroll-regform.hideIcon{
  display: none !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#scroll-regform" href="#" class="scroll-regform"><i class="fa fa-angle-down animated-menu bounce" aria-hidden="true" alt="download" class="pt-8">ICON</i></a>
 
 <div class="col-md-7" id="scroll-regform">
 <p>content</p>
 </div>

---

Related Topics