145

Is there a method in html which makes the webpage scroll to a specific Element using HTML !?

3
  • Are you asking about HTML specifically thus excluding Javascript? Jul 14, 2014 at 15:02
  • That’s all fine if there is an id, a div-head or a name implanted into the page before it is sent to the browser. But if there is absolutely nothing marked for entry there, and you just want to directly refer to a specific text, can you do that? Can you trigger the browser’s search function (Ctrl+F) from outside, without user intervention? Mar 6, 2017 at 16:44
  • Check ref: w3schools.com/jsref/… Aug 28, 2018 at 11:04

12 Answers 12

318

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;
}
8
  • Thank you i appreciate But can we put a variable in div tags ?
    – M1rwen
    Jul 14, 2014 at 14:46
  • 1
    You can use js to put a variable inside the div tag. You may also use PHP.
    – Nicolas
    Jul 14, 2014 at 14:49
  • 2
    A variable? Can you please explain?
    – EasyBB
    Jul 14, 2014 at 14:49
  • Yes if that is what you are looking for, what Nicolas posted in response to your question. Though if you have access to PHP I'd suggest you use it. If you want to create a search query to jump to a certain element in the page you just need some small JS
    – EasyBB
    Jul 14, 2014 at 14:50
  • 1
    Updated my post with an example of using JS to put variables into a div.
    – Nicolas
    Jul 14, 2014 at 14:50
53

You should mention whether you want it to smoothly scroll or simply jump to an element. Jumping is easy & can be done just with HTML or Javascript. The simplest is to use anchor's. The limitation is that every element you want to scroll to has to have an id. A side effect is that #theID will be appended to the URL

<a href="#scroll">Go to Title</a>
<div>
  <h1 id="scroll">Title</h1>
</div>

You can add CSS effects to the target when the link is clicked with the CSS :target selector.


With some basic JS you can do more, namely the method scrollIntoView(). Your elements don't need an id, though it is still easier, e.g.

function onLinkClick() {
  document.getElementsByTagName('h2')[3].scrollIntoView();
  // will scroll to 4th h3 element
}

Finally, if you need smooth scrolling, you should have a look at JS Smooth Scroll or this snippet for jQuery. (NB: there are probably many more).

4
  • 1
    Check the Browser compatibility table carefully before using Element.scrollIntoView() in production link Nov 29, 2017 at 13:28
  • if by chance you are using angular with version > 1, see this answer for smooth scroll Angular smooth scroll May 12, 2019 at 8:10
  • 1
    You do not need a library or jQuery for smooth scrolling. Chrome and Firefox supports scrollIntoView({ behavior: 'smooth' }) Source
    – Nifel
    May 3, 2021 at 5:32
  • @Nifel You did 7 years ago (when I wrote this answer). But you're right in that I should update it
    – webketje
    May 3, 2021 at 21:51
47
<!-- HTML -->
<a href="#google"></a>
<div id="google"></div>

/*CSS*/
html { scroll-behavior: smooth; } 

Additionally, you can add html { scroll-behavior: smooth; } to your CSS to create a smooth scroll.

2
  • this method creates extra white area under footer and hides navigation bar in my code
    – Deniz
    Mar 13, 2021 at 20:43
  • 2
    What is the difference between this answer and the accepted answer?
    – Chris
    Nov 22, 2021 at 23:56
36

Year 2020. Now we have element.scrollIntoView() method to scroll to specific element.

HTML

<div id="my_element">
</div>

JS

var my_element = document.getElementById("my_element");

my_element.scrollIntoView({
  behavior: "smooth",
  block: "start",
  inline: "nearest"
});

Good thing is we can initiate this from any onclick/event and need not be limited to tag.

2
  • 3
    I wouldn't say 2020, as scroll into view has been experimental and worked on since 2005
    – EasyBB
    Feb 25, 2020 at 12:34
  • it will not work everywhere... scrollTo is still better
    – Code Drop
    Jan 17, 2023 at 13:58
19

Here is a pure HTML and CSS method :)

html {
  scroll-behavior: smooth;
  /*Adds smooth scrolling instead of snapping to element*/
}

#element {
  height: 100px;
  width: 100%;
  background-color: red;

  scroll-margin-block-start: 110px;
  /*Adds margin to the top of the viewport*/
  
  scroll-margin-block-end: 110pxx;
  /*Adds margin to the bottom of the viewport*/
}

#otherElement {
  padding-top: 500px;
  width: 100%;
}
<a href="#element">Link</a>

<div id="otherElement">Content</a>

<div id="element">
  Where you want to scroll
</div>

<div id="otherElement">Content</a>

13

If you use Jquery you can add this to your javascript:

$('.smooth-goto').on('click', function() {  
    $('html, body').animate({scrollTop: $(this.hash).offset().top - 50}, 1000);
    return false;
});

Also, don't forget to add this class to your a tag too like this:

<a href="#id-of-element" class="smooth-goto">Text</a>
0
4

 <nav>
      <a href="#section1">1</a> 
      <a href="#section2">2</a> 
      <a href="#section3">3</a>
    </nav>
    <section id="section1">1</section>
    <section id="section2" class="fifty">2</section>
    <section id="section3">3</section>
    
    <style>
      * {padding: 0; margin: 0;}
      nav {
        background: black;
        position: fixed;
      }
      a {
        color: #fff;
        display: inline-block;
        padding: 0 1em;
        height: 50px;
      }
      section {
        background: red;
        height: 100vh;
        text-align: center;
        font-size: 5em;
      }
      html {
        scroll-behavior: smooth;
      }
      #section1{
        background-color:green;
      }
      #section3{
        background-color:yellow;
      }
      
    </style>
    
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript" >
      $(document).on('click', 'a[href^="#"]', function (event) {
        event.preventDefault();
    
        $('html, body').animate({
            scrollTop: $($.attr(this, 'href')).offset().top
        }, 500);
      });
    </script>
      

3

Yes, you may use an anchor by specifying the id attribute of an element and then linking to it with a hash.

For example (taken from the W3 specification):

You may read more about this in <A href="#section2">Section Two</A>.
...later in the document
<H2 id="section2">Section Two</H2>
...later in the document
<P>Please refer to <A href="#section2">Section Two</A> above
for more details.
3

I got it working by doing this, consider that top-page is the element that you want to scroll to:

document.getElementById("top-page").scrollTo({ behavior: "smooth", top: 0 });
2

By using an href attribute inside an anchor tag you can scroll the page to a specific element using a # in front of the elements id name.

Also, here is some jQuery/JS that will accomplish putting variables into a div.

<html>
<body>

Click <a href="#myContent">here</a> to scroll to the myContent section.

<div id="myContent">
...
</div>

<script>
    var myClassName = "foo";

    $(function() {
        $("#myContent").addClass(myClassName);
    });
</script>

</body>
1

Should you want to resort to using a plug-in, malihu-custom-scrollbar-plugin, could do the job. It performs an actual scroll, not just a jump. You can even specify the speed/momentum of scroll. It also lets you set up a menu (list of links to scroll to), which have their CSS changed based on whether the anchors-to-scroll-to are in viewport, and other useful features.

There are demo on the author's site and let our company site serve as a real-world example too.

1

The above answers are good and correct. However, the code may not give the expected results. Allow me to add something to explain why this is very important.

It is true that adding the scroll-behavior: smooth to the html element allows smooth scrolling for the whole page. However not all web browsers support smooth scrolling using HTML.

So if you want to create a website accessible to all user, regardless of their web browsers, it is highly recommended to use JavaScript or a JavaScript library such as jQuery, to create a solution that will work for all browsers.

Otherwise, some users may not enjoy the smooth scrolling of your website / platform.

I can give a simpler example on how it can be applicable.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
</script>
<style>
#section1 {
height: 600px;
background-color: pink;
}
#section2 {
height: 600px;
background-color: yellow;
}
</style>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Smooth Scroll</h1>
<div class="main" id="section1">
<h2>Section 1</h2>
<p>Click on the link to see the "smooth" scrolling effect.</p>
<a href="#section2">Click Me to Smooth Scroll to Section 2 Below</a>
<p>Note: Remove the scroll-behavior property to remove smooth scrolling.</p>
</div>
<div class="main" id="section2">
<h2>Section 2</h2>
<a href="#section1">Click Me to Smooth Scroll to Section 1 Above</a>
</div>
</body>
</html>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.