I want to update the window.location.hash value when the user get's to a certain point on the page.

e.g. if a user scrolls to a div with an ID = 'about', I want the url to update.

The same way as if you click a link that auto scrolls you to an anchor on a page, it updates the hash in the URL.

I envision doing this by detecting if an element is visible and if it is, then updating window.location.hash = elementsID

Open to other suggestions.

I am using React and trying to avoid JQuery so vanilla JS suggestions would be greatly appreciated. Thanks.

edit:

Thanks for the suggestions. Manage to put together a solution with vanilla JS and implement it in a react ponent. Code still needs cleaning up but you get the gist

class HomeView extends React.Component{

    constructor () {
    super();

    this.state = {
      hash: '#'
    }

    this.elements = {}
  }

  ponentDidMount(){
    this.scrollListener();
  }

  ponentDidUpdate(prevProps){
    if(this.props.location.hash !== prevProps.location.hash){
        this.scrollToHash(this.props.location.hash)
    }

  }

  scrollListener(){
    window.addEventListener('scroll', (event) => {

        if(window.pageYOffset > 0 && window.pageYOffset < this.elements.about.offsetTop  - 200){
            const hash = '#';
            this.setState({hash: hash}, () => {
                history.pushState('', '', hash);
                this.updateHashState(hash);

            })

        } else if(window.pageYOffset > this.elements.about.offsetTop - 200 && window.pageYOffset < this.elements.skills.offsetTop - 200) {
            const hash = '#about';
            this.setState({hash: hash}, () => {
                history.pushState('', '', hash);
                this.updateHashState(hash);

            })

        } else if(window.pageYOffset > this.elements.skills.offsetTop - 200 && window.pageYOffset < this.elements.contact.offsetTop - 200) {
            const hash = '#skills';
            this.setState({hash: hash}, () => {
                history.pushState('', '', hash);
                this.updateHashState(hash);

            })

        }else if(window.pageYOffset > this.elements.skills.offsetTop - 200) {
            const hash = '#contact';
            this.setState({hash: hash}, () => {
                history.pushState('', '', hash);
                this.updateHashState(hash);

            })

        }

    })
  }

  updateHashState(hash) {
    switch(hash){
        case '#about':
            this.setState({
                forward: '#skills',
                back: '#'
            })
            break;
        case '#skills':
            this.setState({
                forward: '#contact',
                back: '#about'
            })
            break;
        case '#contact':
            this.setState({
                forward: '',
                back: '#skills'
            })
            break;
        default:
            this.setState({
                forward: '#about',
                back: ''
            })
            break;
    }
  }




    render(){

        return(
            ...
        )

    }

}

export default HomeView

I want to update the window.location.hash value when the user get's to a certain point on the page.

e.g. if a user scrolls to a div with an ID = 'about', I want the url to update.

The same way as if you click a link that auto scrolls you to an anchor on a page, it updates the hash in the URL.

I envision doing this by detecting if an element is visible and if it is, then updating window.location.hash = elementsID

Open to other suggestions.

I am using React and trying to avoid JQuery so vanilla JS suggestions would be greatly appreciated. Thanks.

edit:

Thanks for the suggestions. Manage to put together a solution with vanilla JS and implement it in a react ponent. Code still needs cleaning up but you get the gist

class HomeView extends React.Component{

    constructor () {
    super();

    this.state = {
      hash: '#'
    }

    this.elements = {}
  }

  ponentDidMount(){
    this.scrollListener();
  }

  ponentDidUpdate(prevProps){
    if(this.props.location.hash !== prevProps.location.hash){
        this.scrollToHash(this.props.location.hash)
    }

  }

  scrollListener(){
    window.addEventListener('scroll', (event) => {

        if(window.pageYOffset > 0 && window.pageYOffset < this.elements.about.offsetTop  - 200){
            const hash = '#';
            this.setState({hash: hash}, () => {
                history.pushState('', '', hash);
                this.updateHashState(hash);

            })

        } else if(window.pageYOffset > this.elements.about.offsetTop - 200 && window.pageYOffset < this.elements.skills.offsetTop - 200) {
            const hash = '#about';
            this.setState({hash: hash}, () => {
                history.pushState('', '', hash);
                this.updateHashState(hash);

            })

        } else if(window.pageYOffset > this.elements.skills.offsetTop - 200 && window.pageYOffset < this.elements.contact.offsetTop - 200) {
            const hash = '#skills';
            this.setState({hash: hash}, () => {
                history.pushState('', '', hash);
                this.updateHashState(hash);

            })

        }else if(window.pageYOffset > this.elements.skills.offsetTop - 200) {
            const hash = '#contact';
            this.setState({hash: hash}, () => {
                history.pushState('', '', hash);
                this.updateHashState(hash);

            })

        }

    })
  }

  updateHashState(hash) {
    switch(hash){
        case '#about':
            this.setState({
                forward: '#skills',
                back: '#'
            })
            break;
        case '#skills':
            this.setState({
                forward: '#contact',
                back: '#about'
            })
            break;
        case '#contact':
            this.setState({
                forward: '',
                back: '#skills'
            })
            break;
        default:
            this.setState({
                forward: '#about',
                back: ''
            })
            break;
    }
  }




    render(){

        return(
            ...
        )

    }

}

export default HomeView

• javascript
• html
• css

• Scroll position will not work if the divs have text. When a browser window is less wide, the text forces the div to be longer, thus changing the scroll position of all divs below. – Kobbe Commented Apr 9, 2017 at 4:58
• 3 I like how you asked for a React solution and all answers are jQuery ones – pollx Commented Dec 16, 2019 at 14:29

3 Answers 3

Look at my proposition. jQuery code will catch all <section> selectors after document loaded and set appropriate hash from data-hash attribute while you scroll.

$(document).ready(function(){
  var sections = {};
  
  $(".section").each(function(){
  	var hash = $(this).data("hash"),
            topOffset = $(this).offset().top;
        sections[topOffset] = hash;
  });
  
  $(window).scroll(function(e){
  	var scrollTop = $(window).scrollTop();
        setHash(scrollTop);
  });
  
  function setHash(st){
  	var hash = "";
  	for(section in sections){
    	if (section < st + ($(window).height()/2)) hash = sections[section];
    }
    console.log(`SETTING HASH: ${hash}`);
    window.location.hash = hash;
  }
});

section{
  position: relative;
  display: block;
  width: 100%;
  height: 800px;
  background: #fff;
  border-bottom: 1px solid #000;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="section" data-hash="about">
  #about
</section>
<section class="section" data-hash="works">
  #works
</section>
<section class="section" data-hash="contact">
  #contact
</section>

Just as another idea, updating the hash by taking the scroll value is more robust. Can be done in jQuery using scrollTop().

$(window).scroll(
    function(){
        if($(this).scrollTop() > 100 && $(this).scrollTop() < 200){
            window.location.hash = "your_hash_name";
        }else{
            window.location.hash = "";
        }
    }
);

This updates the location.hash value once you scroll between (100, 200) pixels.

Check this out. Let me know if you need a way to grab the id of the div that is scrolled to. What Saharsh wrote above can work, but if you resize the browser and there is text in a div, the scroll position of the div below will change. Also, think of responsive design where the scroll position of the div will be totally different on a smartphone than a tablet than a desktop. I simplified my example with a button to click to go to a position with an id (test). Let me know if you need more help to put this into practice with scroll position.

<!DOCTYPE html>
<html>
    <head>
        <script src="http://code.jquery./jquery-latest.min.js"></script>
        <script>
        $(document).ready(function(){
            $("button").click(function(){
                window.location.href = "#test";
            });
        });
        </script>
    </head>
    <body>
    <div style="background:#aaf;width:100%;height:400px;"><button>Go To Test</button></div>
    <div style="background:#afa;width:100%;height:400px;" id="test"></div>
    </body>
</html>