How to scroll page without using anchor <a> tag

JavaScript
1

I have a menu bar code like this

<ul class="nav navbar-nav">
	<li class="active"><a href="#Compare_Price" class="move">COMPARE PRICES</a></li>
	<li><a href="#Product_Specification" class="move">SPECIFICATIONS</a></li>
	<li><a href="#Product_Reviews" class="move">REVIEWS</a></li>
	<li><a href="#FAQs" class="move">FAQ'S</a></li>
	<li><a href="#Related_Accessories" class="move">RELATED ACCESSORIES</a></li>
</ul>

and using this code page scroll is working fine but now I want to remove anchor …. So the problem is that without using anchor tag how can I scroll the page to the respective section when I click on any tab.

Please help me.
Thank you!

2

Can you set the value of location.hash to the appropriate string, such as “#FAQs”, for where you want to scroll to?

3

Sorry, I do not understand what you want to say?

5

You are wanting to scroll the page down to a target identifier.

The location object contains several properties, one called “hash” that when updated with an identifier, scrolls the page to the appropriate place.

Updating the location.hash property seems like it’s the easiest solution for your particular needs.

You say that you are removing the link, so instead, you will need to add a click event listener to each of the list items.

You will also need to configure each of those click events with the desired target for each of them, so that the page scrolls to the right place.

When the click event occurs, you can then update location.hash with the desired target, which will scroll down to the appropriate place.

Are you really sure that you want to remove and replace the anchor tag? You are creating a lot more work for yourself.

1 Like
6

Why? That’s what an anchor is for—providing a link to the relevant section. If you do it with JS, it will be less accessible.

1 Like
7

I don’t know, but this feels like a
“I have a one long page site that I want the links to be like a normal multiple page site” thing.

Exactly. If I bookmark a particular section of a page it’s because that is the section I want to go to, else I would bookmark the “home” page.

I would be annoyed if I couldn’t easily get to the section of interest later on.

8

Yes, I am sure about to replace the anchor …. My clients SEO team said that they don’t want anchor tag here. I also not understand why they want this and what I do for this?
Can you give me any example, please?

9

Sure thing. Change the href attribute to something else, to stop it being an anchor, and rename it to data-hash

<a data-hash="#Compare_Price" class="move">COMPARE PRICES</a>

Because the above anchor no longer has the href attribute, it’s not treated as an anchor tag and is just shown as normal text instead.

You can attach an event handler to the nav list with:

document.addEventListener("click", navClickHandler, false);

The navClickHandler is where we figure out what what was clicked, and ignore the click if it wasn’t on an anchor tag.

function navClickHandler(evt) {
    evt = evt || event;
    var targ = evt.target || evt.srcElement;
    if (targ.nodeName === "A") {
    	scrollToHash(targ);
    }
}

The scrollToHash function now has one simple job to do. Get the hash from the target element, and scroll to it.

function scrollTo(el) {
  var hash = el.getAttribute("data-hash");
  location.hash = hash;
}

it should be as simple as that.

1 Like
10

What does that do when JavaScript is disabled?

11

It will completely fail to work of course. Do you have any suggestions to the OP on not using the anchor tag?

12

is the only way that will work for all visitors.

2 Likes
13

I’m not surprised that the client’s SEO team doesn’t understand how fragment identifiers work.

But it saddens me that the client would prefer a “page written for bots, not humans” approach.

If it were me, I’d seriously consider firing the client.

In the least, I’d make sure there was a rock solid indemnification clause in the contract for when the site ultimately fails to meet the clients hopes.

3 Likes
14

Definitely - no point in perfect SEO for totally unusable pages.

3 Likes
15

However, I would have thought it was the job of the design team to explain that to the client, and ensure they understand that they are risking breaking the page for human visitors, who are surely the reason for the site’s existence.

2 Likes
16

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.