smooth href scrolling

In this example below you will see how to do a smooth href scrolling with some HTML / CSS and Javascript

This shows a basic jquery scrolltop method which makes the smooth page scrolling to any href.

Thumbnail
This awesome code was written by -HAN-, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright -HAN- ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>smooth href scrolling</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header" id="header">
  The header
</div>
<div class="container">
  <p>Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development. Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development.Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development.Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development.</p>
  <p>Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development. Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development.Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development.Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development.</p>
</div>
<div class="container">
  <p>Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development. Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development.Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development.Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development.</p>
  <p>Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development. Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development.Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development.Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development.</p>
</div>
<div class="container">
  <p>Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development. Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development.Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development.Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development.</p>
  <p>Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development. Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development.Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development.Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development.</p>
</div>
<footer class="footer">
  This is the footer
</footer>
<a href="#header" class="scroll-link">
  Top
</a>
  
  

    <script  src="js/index.js"></script>




</body>

</html>


/*Downloaded from https://www.codeseek.co/-HAN-/smooth-href-scrolling-uGcxF */
body
{
  margin:0;
}
.header, .footer
{
  background-color:#d0d0d0; 
  padding:25px;
}
p
{
     background-color:#e3e3e3;
      padding:10px;
  border-radius:12px;
}


/*Downloaded from https://www.codeseek.co/-HAN-/smooth-href-scrolling-uGcxF */
$(function()
 {
  $('.scroll-link').click(
    function(e)
    {
      e.preventDefault();
      //path of the href
      var path = $(this).attr('href');
      //position of the href path
      var pos = $(path).offset().top ;
      //animate to scroll the body
      $('html,body').animate({
        scrollTop : pos+'px'
      },400);
      
      
    })
})

Comments

More from -HAN-

A Pen by Rohan Puri

A Pen by Rohan Puri

By -HAN-
canvas demo

canvas demo

By -HAN-
A Pen by Rohan Puri

A Pen by Rohan Puri

By -HAN-
A Pen by Rohan Puri

A Pen by Rohan Puri

By -HAN-

You Might Also Like

Personal Portfolio

Personal Portfolio

By tonyfreelance
A Pen by Emil Cieslar

A Pen by Emil Cieslar

By emilcieslar
Pa&apos;Jade &lt;3 - Colaboraci&#xF3;n -khe-

Pa'Jade <3 - Colaboración -khe-

By ranmaonifas
Grid Example By Jan Drewniak

Grid Example By Jan Drewniak

By tyxou
Side Menu and Navigation: 1.0.0-beta.6

Side Menu and Navigation: 1.0.0-beta.6

By squrler
Book v2.0

Book v2.0

By s3m3nT3s
Random quote machine with api

Random quote machine with api

By DanielGM
50 odd exes

50 odd exes

By potatoDie
© 2018 - Copyright CodeSeek.co
contact email