JSFiddle - React, Tailwind, and code Playground

by envira

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
 <a style="position:fixed" id="btn" href="#div1" class="glyphicon glyphicon-arrow-down">Click</a>


        <div style="height: 1000px" id="div1"></div>
        <div style="height: 1000px" id="div2"></div>
        <div style="height: 1000px" id="div3"></div>
        <div style="height: 1000px" id="div4"></div>
        <div style="height: 1000px" id="div5"></div>

JavaScript

$window = $(window);
        $window.scroll(function () {
            if ($window.scrollTop() >= 0 && $window.scrollTop() < 1000) {
                $("#btn").attr("href", "#div1");
            } else if ($window.scrollTop() >= 1000 && $window.scrollTop() < 2000) {
                $("#btn").attr("href", "#div2");
            } else if ($window.scrollTop() >= 2000 && $window.scrollTop() < 3000) {
                $("#btn").attr("href", "#div3");
            } else if ($window.scrollTop() >= 3000 && $window.scrollTop() < 4000) {
                $("#btn").attr("href", "#div4");
            } else if ($window.scrollTop() >= 4000) {
                $("#btn").attr("href", "#div5");
            }
        });


        $("#btn").click(function () {
          
            var div = $("#btn")[0].hash;
            var lastChar = div[div.length - 1];
            lastChar++;
            $("#btn").attr("href", "#div" + lastChar + "");
        });