Bootstrap Snippet Smooth scrolling when clicking an anchor link using HTML CSS Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Include the above in your HEAD tag -->
</head>
<body>
<div class="container">
    <header>
        <ul>
            <li>
                <a href="#1">Section1</a>
            </li>
            <li>
                <a href="#2">Section2</a>
            </li>
            <li>
                <a href="#3">Section3</a>
            </li>
        </ul>
    </header>
    
  <section class="section1" id="1">
      <h1>Section1</h1>
  </section>  
   <section class="section2" id="2">
      <h1>Section2</h1>
  </section>  
   <section class="section3" id="3">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
    .container{max-width:900px; margin:auto;}
header{
    text-align:center; 
    background:#dcdcdc;
    position:fixed;
    width:100%;
    top:0;
    left:0;
    right:0;
    margin:auto;
    
}
header li{ display:inline-block;}
header li a{ 
    display:inline-block; 
    font-size:16px; 
    color:#000;
    padding:10px 20px;
    
}
section{min-height:200px; padding:30px; color:#fff; margin:30px 0 ;}
.section1{background:#fe0042;}
.section2{background:#f48624;}
.section3{background:#2ec2ff;}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
$(document).on('click', 'a[href^="#"]', function (event) {
    event.preventDefault();
    $('html, body').animate({
        scrollTop: $($.attr(this, 'href')).offset().top -60
    }, 500);
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Smooth scrolling when clicking an anchor link"
Bootstrap 4.1.1 Snippet by sunil8107

Related: See More

Questions / Comments:

"Smooth scrolling when clicking an anchor link" Bootstrap 4.1.1 Snippet by sunil8107

Related: See More

Questions / Comments:

"Smooth scrolling when clicking an anchor link"
Bootstrap 4.1.1 Snippet by sunil8107