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

Tiny city

Tiny city

By stepan
Masturbation causes blindness

Masturbation causes blindness

By equantlondon
A Pen by Datu Arellano

A Pen by Datu Arellano

By datuarellano
horo

horo

By kilchenmann
Flexbox Guild

Flexbox Guild

By jccheng
Push Buttons

Push Buttons

By Samuel Kendrick
jQuery scrollView V0.8 : viewport scroll and screen vertical helper

jQuery scrollView V0.8 : viewport scroll and screen vertical helper

By molokoloco
A Pen by Erik Blankinship

A Pen by Erik Blankinship

By jedierikb
© 2018 - Copyright CodeSeek.co
contact email