All geek questions in one place

Scroll to a specific item Using html

Is there a method in html that causes a webpage to scroll a specific element using HTML !?

+27
source share
7 answers

Yes you use this

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

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

+45
source

You must indicate whether you want it to scroll smoothly or simply jump to an element. Jumping is easy and can only be done using HTML or Javascript. The simplest is to use binding. The limitation is that every element you want to scroll must have id . A side effect is that #theID will be added 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 by clicking a link using the CSS :target selector.

With some basic JS, you can do more, namely the scrollIntoView() method. Elements do not need an identifier, although it is even simpler, for example

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

Finally, if you need smooth scrolling, you should take a look at JS Smooth Scroll or this snippet for jQuery. (NB: there may be many others).

+19
source 
 <!-- HTML --> <a href="#google"></a> <div id="google"></div> /*CSS*/ html { scroll-behavior: smooth; }

Alternatively, you can add html {scroll behaviors: smooth;

+14
source

Add this to your javascript:

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

Also, be sure to also add this class to your tag:

 <a href="#id-of-element" class="smooth-goto">Text</a>
+9
source

Yes, you can use the anchor by specifying the id attribute of an element and associating 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.
+1
source

Using the href attribute inside the anchor tag, you can scroll the page to a specific element with # before the element identifier name.

In addition, here are some jQuery / JS that will carry out the transfer of variables into divs.

 <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
source 
 <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; } #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>
0
source

Source: https://habr.com/ru/post/972182/

More articles:


All Articles