How to Scroll an HTML Page to a Given Anchor

How to scroll an HTML page to a given anchor

function scrollTo(hash) {
    location.hash = "#" + hash;
}

No jQuery required at all!

Best way to scroll HTML page to given anchor in a responsive page

The best way according to me is to place the target content on the same page with an ID(obviously unique) <div id="generic"> ..content.. </div> and on your <a> tag's href, target the required div with the ID with href="#generic". like so

<a href="#generic">
  <h2>Magna</h2>
  <div class="content">
     <p>Sed nisl arcu euismod sit ame.</p>
  </div>
</a>
.....
.....
.....
<div id="generic">..</div>

Additional to this add smooth scrolling to make it look like its sliding up/down to the targeted content.

To not add the #generic to your url try using a super simple JQuery fix additional to the above code:

$("article a").click(function(e){
    var $anchor = $(this);
    $('html, body').stop().animate({
        scrollTop: $($anchor.attr('href')).offset().top
    }, 1500);
    e.preventDefault(); //this is the important line.
});

I have tested this on your website & it works like a charm! Let me know if any issues.

Scroll to a specific Element Using html

Yes you use this

<a href="#google"></a>

<div id="google"></div>

But this does not create a smooth scroll just so you know.

You can also add in your CSS

html {
  scroll-behavior: smooth;
}

Slowly scroll to a specific div or anchor in a html page

Try like this :

$(document).ready(function(){    $("#button").click(function(e) {    e.preventDefault();    $('html, body').animate({      scrollTop: $($.attr(this, 'href')).offset().top    }, 2000);  });});

#myDiv {  margin-top: 800px;  height: 50px;  width: 300px;  background: red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><a href="#myDiv" id="button">button</a><div id="myDiv"></div>

Scroll when clicking an anchor link only works once

I think this behaviour is caused by you setting the hash-position. If the hash is already set to it, the browser won't scroll.

How about

document.getElementById('anchor01').scrollIntoView();

On-page anchor tag scroll-to javascript, to land just above destination element

You just need to remove 60px from the offset().top of the target element to allow space for the fixed header:

scrollTop: target.offset().top - 60

This could be made more dynamic if you select the fixed header element and get its height directly:

scrollTop: target.offset().top - $('#fixedHeader').height()

How to Scroll an HTML Page to a Given Anchor