Home Web Design CSS Pure CSS Smooth Scroll With Bootstrap | HTML CSS Target Scrolling

Pure CSS Smooth Scroll With Bootstrap | HTML CSS Target Scrolling

May 16, 2019

14704

How to create smooth scroll feature without JavaScript? Solution: Pure CSS Smooth Scroll With Bootstrap – HTML CSS Target Scrolling.

If you surf many websites then you probably know what is smooth scrolling. At this time all modern websites use smooth scrolling feature, & many WordPress themes come with this feature. And also this is very common in single page websites.

Mostly smooth scroll features are built-in JavaScript or any JS framework, But today I am sharing Pure CSS Smooth Scroll With Bootstrap. In this program, I had used Bootstrap for only creating the layout, not using javascript. I know with jQuery, we can create an amazing scrolling effect. But I want to show you that we can also create a basic with only HTML CSS.

I said before, Smooth scrolling is very effective in single page website. If you want to create your single page portfolio site, then you can create an attractive one with this program. This program also useful for multipage websites, you can create a sort button for any section. When your user clicks on the button then he/she will navigate to the section.

If you don’t understand what is smooth scrolling, what I am talking about. Then see the program’s preview given below.

Preview Of Target Scrolling

See this video preview to getting an idea of how this program looks like.

Now you can see how this scroll program actually is. If you like this then get the source code of this program.

Pure CSS Smooth Scroll Source Code

Before sharing source code, let’s talk about this program. I used bootstrap for just creating the layout. This is a pure HTML CSS smooth scrolling program without any JS library. Basically, this is a id="" & #target based program. & I used a CSS scroll-behavior (get info) property for smooth scroll effect.

For creating this program you have to create only 2 files. One for HTML & one for CSS. Follow the steps for creating this without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given here below.

<!DOCTYPE html>
<!-- code by webdevtrick ( https://webdevtrick.com ) -->
<html>
<head>
  <meta charset="UTF-8">
  <title>HTML CSS Smooth Scrolling | Webdevtrick.com</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css">
      <link rel="stylesheet" href="style.css">
</head>

<body>
  
  <ul>
    <li class="list-elem" id=""><a href="#web">Web</a></li>
    <li class="list-elem" id=""><a href="#dev">Dev</a></li>
    <li class="list-elem" id=""><a href="#trick">Trick</a></li>
    <li class="list-elem" id=""><a href="#dot">Dot</a></li>
    <li class="list-elem" id=""><a href="#com">Com</a></li>
  </ul>
  
  <div id="container">
    <div id="web"><h1>WEB</h1></div>
    <div id="dev"><h1>DEV</h1></div>
    <div id="trick"><h1>TRICK</h1></div>
    <div id="dot"><h1>.DOT</h1></div>
    <div id="com"><h1>COM</h1></div>
  </div>
  
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>HTML CSS Smooth Scrolling | Webdevtrick.com</title>

</head>

<body>

<ul>

<li class="list-elem" id=""><a href="#trick">Trick</a></li>

</ul>

<div id="trick"><h1>TRICK</h1></div>

</div>

</body>

</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes.

/** code by webdevtrick ( https://webdevtrick.com ) **/
ul{
  position: fixed;
  top: 50%;
  left: 0;
  transform: translateY(50%);
  margin: 0;
  padding: 0;
  z-index: 1; 
}
ul li{
  list-style: none;
}
#container{
  width: 100%;
  height: 100vh;
}
#container div{
  position: relative;
  width: 100%;
  height: 100%;
}

#container div h1{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  text-align: center;
  text-transform: uppercase; 
  margin: 0;
  padding: 0;
  font-size: 8rem;
  color: #fff;
}
ul li a{
  display: block;
  text-decoration: none;
  height: 30px;
  font-size: 24px;
  background: #fff;
  width: 140px;
  color: #262626;
  margin: 4px 0;
  padding-left: 15px;
  text-transform: uppercase;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  line-height:30px;
}
ul li a:hover{
  background: #333;
  text-decoration: none;
  color: #fff;
}
#container{
  width: 100%;
  height: 100vh;
  scroll-behavior: smooth;
  overflow-Y: scroll;
}
#container div#web{
  background-color: #00ced1;
}
#container div#dev{
  background-color: #f05855;
}
#container div#trick{
  background-color: #2bb673;
}
#container div#dot{
  background-color: #2bb673;
}
#container div#com{
  background-color: #c72339;
}

/** code by webdevtrick ( https://webdevtrick.com ) **/

ul{

position: fixed;

top: 50%;

left: 0;

transform: translateY(50%);

margin: 0;

padding: 0;

z-index: 1;

}

ul li{

list-style: none;

}

#container{

width: 100%;

height: 100vh;

}

#container div{

position: relative;

width: 100%;

height: 100%;

}

#container div h1{

position: absolute;

top: 50%;

transform: translateY(-50%);

width: 100%;

text-align: center;

text-transform: uppercase;

margin: 0;

padding: 0;

font-size: 8rem;

color: #fff;

}

ul li a{

display: block;

text-decoration: none;

height: 30px;

font-size: 24px;

background: #fff;

width: 140px;

color: #262626;

margin: 4px 0;

padding-left: 15px;

text-transform: uppercase;

border-top-right-radius: 15px;

border-bottom-right-radius: 15px;

line-height:30px;

}

ul li a:hover{

background: #333;

text-decoration: none;

color: #fff;

}

#container{

width: 100%;

height: 100vh;

scroll-behavior: smooth;

overflow-Y: scroll;

}

#container div#web{

background-color: #00ced1;

}

#container div#dev{

background-color: #f05855;

}

#container div#trick{

background-color: #2bb673;

}

#container div#dot{

background-color: #2bb673;

}

#container div#com{

background-color: #c72339;

}

That’s It. Now you have successfully created Pure CSS Smooth Scroll With Bootstrap program, & this is a perfect example of HTML CSS Target Scrolling. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.

5 COMMENTS

gelnagels breda May 20, 2019 At 1:43 pm

Hello there! I know this is kind of off topic but I was wondering
if you knew where I could find a captcha plugin for my comment form?
I’m using the same blog platform as yours and I’m having
problems finding one? Thanks a lot!

Reply
Jassher May 21, 2019 At 8:16 pm

Awesome …worked perfectly , though little tuning to make it compatible…

Can u please teach lazy loading like flipkart ?
Please let me know ,if you will make it or not brother !

Reply
Alpesh Dudhat June 12, 2019 At 9:30 am

If you put your code in codepen for live then it’s very helpful.

Reply
- shaan June 12, 2019 At 9:50 am
  
  I am planning to launch our own live code feature for the demo, I am not interested on dependent something.
  
  Reply
daniel September 20, 2019 At 5:41 pm

I like this! One question, I notice that this trick breaks scrolling the page using the keyboard; spacebar, arrow keys etc no longer works. Clicking once somewhere on the page, and keyboard scrolling works again. Click on one of the navigation buttons, and keyboard scrolling breaks again. I’m guessing wildly that the div#container somehow gets (in)activated in some unfortunate way, and clicking on the page restores it. Do you have any idea on how to get around this? Both on first page load, and after using the nav buttons. Perhaps js is needed for that…

Reply