Scroll with anchor without # in URL

scroll to anchor
anchor tag scroll to id
hide anchor link in url
javascript jump to anchor
jquery remove hash from url on click
anchor tag in javascript
scrollintoview
jquery smooth scroll to anchor

I need to scroll through a page using anchor tag.

Right now I'm doing:

<a href="#div1">Link1</a>

<div id='div1'>link1 points me!!</div>

This works fine when I clicked on Link1, the page scrolls to the div with id "div1". The point is, I do not want to change my URL which takes #div as suffix once I clicked on Link1.

I tried with anchor href as

void(0);

and

location.hash='#div1';
return false;

e.preventdefault;

How to avoid changing the 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)

Alternative to anchor URL? - JavaScript, Is there an other way to link to an element on the same page without using anchor URLs? scrollTo command to scroll to a certain location on the page. 1. To make the body of the page scrollable only by mousewheel/manually and not with anchor tags. This would apply to the body only and not other elements.-or-2. To scroll to the anchor tag within the div, and cancel the process before it affects the body. A bonus would be if it did not add the anchor tag to the url.

scrollIntoView did the best job when all other methods failed!

document.getElementById('top').scrollIntoView(true);

Where 'top' is the id of the html tag you want to go.

Removing #anchor links from changing browser URL when clicked , @jordanwinn you could use this script to scroll to the section without having the anchor on the URL: $('your-class').click(function() { $('html,  Try using this jquery plugin: Scrollorama.It has tons of cool features and you can use window.location.hash to update your browsers hash.. Alternatively, you can add a "scroll" event to check when an anchor is reached.

Make your life easier, try the following and let me know if there is anything else ;-)

<div>top</div>
<div style="height: 800px;">&nbsp;</div>
<div><a href="javascript:void(0);" onclick="window.scroll(0,1);">click here</a></div>

FYI: You only need to play around with one/single line href="javascript:void(0);" onclick="window.scroll(0,1);" and it works for you.

Have a good day!

Smooth Scroll Without Anchor Link Displaying In Address Bar, elcalibano had seen this cool anchor link method/workaround to make sure Anchor links or the (#dividnamegoeshere) doesn't show up in your  Next, select the section, row or module you want your anchor link to scroll to when clicked, hit the Advanced tab and in the CSS ID section enter the unique anchor you chose without the preceding hash (#).

Only Add this code into jquery on document ready

Ref : http://css-tricks.com/snippets/jquery/smooth-scrolling/

$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^/ / , '') == this.pathname.replace(/^/ / , '') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});

Replacing anchor links with JavaScript < JavaScript, Add smooth scrolling to all links Prevent default anchor click behavior event.​preventDefault Add hash (#) to URL when done scrolling (default click behavior) Is there a way to emulate clicking on the "GoTo Label2" link to scroll to the appropriate region on the page through code? EDIT: An acceptable alternative would be to scroll to an element with a unique-id, which already exists on my page. I would be adding the anchor tags if this is a viable solution.

Riffing off Henser's answer, I have a case where the window.location.hash is already set, and the user then scrolls back to the top of the page (where the hash link is).

Since the hash is already set, you can re-locate on clicking that link by:

$(window).scrollTop($('a[name='+id+']').offset().top);

Add smooth scrolling to page anchors, <a href="#section-two">Section Two</a>. The browser window will scroll itself (​instantly) into such a position where the Target will match when the hash tag in the URL matches the ID of an element. You still have to position the anchor somewhere above the heading without affecting the visual flow of the document. This is a working script that will scroll the page to the anchor. To setup just give the anchor link an id that matches the name attribute of the anchor that you want to scroll to.

Hash Tag Links That Don't Headbutt The Browser Window, Since I have a fixed header, I need to offset scrolling by 125 pixels. These two bits of javascript combined worked for me without modification. The question asked was not how to scroll to the top of the page, it was how to scroll to an anchor with an id – user1380540 May 21 '15 at 18:22 Is there a way I can use that in WordPress?Am adding to my site but it doesn't really work.

Scroll to anchor with offset when coming from another page, Please go to the forum, click on a topic, then select the post anchor in the top right corner. Clicking on it will smooth scroll to it but won't update the browser URL, so can't copy & paste that point easily. Anchor points, scroll points or HTML bookmarks as some call them, make it possible to jump from one point on a page to another position on the same page by clicking a link. You can also jump from any point on any page to another position on another page and even to another position on another site.

Smooth scroll to anchor does not update browser URL, To achieve a smooth scroll, we will use a WordPress plugin page scroll to id. Setup Simple WordPress Anchor Link without a plugin link, nothing would happen, except that there would be #anchor-link-info in the URL. How to Create an Anchor Link to Jump to a Specific Part of a Page. An anchor link is a link that allows users to flow through a website page. It helps to scroll and skim read easily. A named anchor can be used to link to a different part of the same page (like quickly scrolling) or to a specific section of another page. Creating an Anchor Link¶

Comments
  • 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
  • This works well. Spent a bunch of time on the old # anchor tags but they seem to get 'broken' when there is a bunch of scripting.
  • Thanks a lot dear!
  • Upvote even though this didn't work for me for some reason last time I tried.
  • This is a better solution than the accepted one because when I used the accepted one, it doesn't take into account any margins above or below the position being scrolled to. As a result, part of the text is cut off when the scrolling is done.
  • This is really bad. As written when you click ANY anchor tag, you will initialize this function. You should target a specific ID. Also, your solution does not work.
  • it works well you just need to define the class instead of universal "a" tag