<style> .div{ position: relative; } p{ width: 100px; height: 100px; position: absolute; } #html{ top: 500px; background-color: brown; } #css{ top: 1500px; background-color: cadetblue; } #js{ top: 2500px; background-color: cornflowerblue; } </style></head><body> <div class="a"> <a href="#html">html</a> <a href="#css">css</a> <a href="#js">js</a> </div> <div class="div"> <p id="html"></p> <p id="css"></p> <p id="js"></p> </div> <script> $(".a a").click(function(){ var id = $(this).attr("href"); var scrollTop = $(id).offset().top; $("html").animate({scrollTop:scrollTop},1000); console.log(scrollTop); }) </script>