When we were working on the SPA application, we had to abandon the HTML5 Browser History API to implement front-end routing in the form of hash routing in order to be compatible with older browsers such as IE9, but because the hash was taken up by the route, As a result, the anchor function, which was not a problem, has become a moderate problem.

After my own search, there are two ways to solve this problem. In order to use it in the React ecology in a simple and elegant way, I specially encapsulate an anchor component called React-Anchor-no-hash, which is written in a way similar to the native A tag. And can support the distance and specified elements of the scroll, as far as possible to meet the needs of the business.

Before introducing this component, however, there are two basic solutions.

Two solutions

scrollIntoView

The scrollIntoView method lets you scroll the current element into the viewable area of the browser window. It can be used as follows:

var element = document.getElementById("box");

element.scrollIntoView();
Copy the code

This API is compatible with Internet Explorer 8 and above, so you can safely use it.

Note: Internet Explorer before IE10 is partially supported. For details, see Can I Use.

scrollTop

Another way to do this is to use the scrollTop API. This method is also more compatible. Compared to scrollIntoView, you need to define the elements to be rolled and the height to be rolled.

  • You have an A element in Content, and Content sets scroll, and you want the A element to scroll into the visible area.

  • If you usescrollIntoViewIt’s going to look like this, where the A element is displayed at the top of the browser viewport, so that it overlaps with the Header and partially hides it.

  • So you need to use itscrollTopGo ahead and set the content scroll distance, say 60px, and the end result will be what we want.

The usage is as follows:

const cont = document.querySelector('#container');
const a = document.querySelector('#a');

cont.scrollTop = a.offsetTop + 60;
Copy the code

react-anchor-without-hash

Both of the above methods need to be encapsulated if they are to be used conveniently in a project, and they are far from being used in the native A-tag form.

However, if it is under react technology stack, we can use components to encapsulate an anchor point similar to A label, so that in the form of use, we can be closer to the native way and reduce the use cost.

So I wrote the React component, which is compatible with both solutions, so that you can implement the anchor points very easily. If you use the React component, the above implementation will look like this:

import Anchor from 'react-anchor-without-hash' // ...... const anchorProps = { type: 'scrollTop', container: '#container', interval: 60 } <div id="container" style={{position: 'relative', overflow: 'scroll'}}> <Anchor name="a" {... anchorProps}> <div> <h2>This is a</h2> <div>There are some text... </div> </div> </Anchor> </div>Copy the code

Simply type in the address bar of the page: http://somehost/path/#hash? _to=a will let a scroll to where you want it!

Github:github.com/kwzm/react-…

Demo: KWZM. Making. IO/react – ancho…

Codesandbox: codesandbox. IO/embed/react…

Welcome to discuss and Star!!