All geek questions in one place

Do not click the url when clicking the anchor link

I checked other posts here, there are no results of what I'm looking for. I want to click on

<a href="#about">About</a> <div id="about">Content of this..</div>

and scroll to this item without putting www.domain.com/#about in the address bar

As an ideal example, please check this site, which I found here, and click on some of thethey links, do not change the address bar when clicked.

+6
source share
5 answers
 window.location.hash = ""

is a possible way to find.

hash gives the line next to # .

+2
source

You can do what you want using javascript and jquery, the example below (note that this is using the old version of jquery):

 <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <script type='text/javascript'> jQuery(document).ready(function($) { $(".scroll").click(function(event){ event.preventDefault(); $('html,body').animate({scrollTop:$(this.hash).offset().top}, 1200); }); }); </script> </head> <body> <a class="scroll" href="#codeword">Blue Words</a> <div id="codeword"></div> </body> </html>
+1
source

I played with it myself, and here is a summary of my research on this issue.

Here is the base link:

 <A HREF="#codeword">Blue Words</A>

Here, as you indicate, where the jump will scroll the page:

 <A NAME="codeword">

Here's what's going on

The HREF command is the same as the base link, except for a codeword link, not a URL.

PLEASE NOTICE, there is a # sign in front of the code word. This is to indicate an internal link. Unsigned # the browser is looking for something outside the page with the name after your code word.

Your "code word" can be anything, anything. I try my best to keep it short and make it stand out for what it jumps on. There may be a limit on the number of letters you can use, but I have not found it yet.

The point at which the page jumps follows the same general format, except that the word HREF will be replaced by the word NAME.

PLEASE NOTE that there is no # in the NAME command.

Attention! Where you place the target NAME will appear at the top of the browser screen.

Hope this helps.

0
source

// do not use a, use class

  $(document).ready(function(){ $(".mouse").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 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: $("#section").offset().top }, 800, function(){ // Add hash (#) to URL when done scrolling (default click behavior) window.location.hash = ""; }); } // End if }); });
0
source

One possible way to solve this problem is to use <button> instead of <a> .

So, not ....

 <a href="#about">About</a> <div id="about">Content of this..</div>

... you can change it to

 <button href="#about">About</button> <div id="about">Content of this..</div>

Thus, the anchor link will not affect the URL.

0
source

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

More articles:


All Articles