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:
- Text Animate On Scroll
- HTML CSS Navigation Bar
- CSS 3D Image Gallery
- Animated Reveal Text With Pure CSS
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.
|
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.
|
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.
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!
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 !
If you put your code in codepen for live then it’s very helpful.
I am planning to launch our own live code feature for the demo, I am not interested on dependent something.
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…