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.

You May Also Like:

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.

index.html <!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> 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 <!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>

style.css

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

style.css /** 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; } 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 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 /** 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.