You have heared and saw jquery and javascript smotth scrolling to a div or anchors tag on a page but here we found a Pure CSS code that is doing the same but without any javascript or jquery. This CSS3 code is working on :target property and smothness is give by trasition property. So all new broswers that are accepting CSS It There will be able to run this code more quickly as javascript and jquery do.
So while we searching over internet, we found this code and now sharing it here. You can see the live DEMO first then see the features and in last, garb the code and run it. Its very easy to customize it but if you are not getting, how tot customize it then you can contact us so we can customize for you. Now without any preface, get the code from below.
Table of Contents
Features:
1.) Pure CSS3.
2.) All CSS3 Browsers Support.
3.) No JavaScript Or JQuery.
4.) Smooth Scrolling To Desired DIV.
5.) Anchor Links Based.
6.) Short And Understandable Code.
7.) Up And Down, Both Side Animation.
8.) Fully Customizable.
9.) Can Work Anywhere With Any Code.
10.) Stylish DIV CSS Added.
How To Add In Blogspot?
1.) Go To Your www.blogger.com
2.) Open Your Desire Blog.
3.) Go To “Layout“.
4.) Click “Add A Gadget” Where You Want To Add It.
5.) Now Scroll To “HTML-JAVASCRIPT“
6.) Click “+” Icon To Add It.
7.) Now Copy The Below Code And PasteIt To There.
8.) Leave The TitleEmpty.
9.) Click Save, Now You Are Done.
OR
1.) Go To Your www.blogger.com
2.) Open Your Desire Blog.
3.) Go To “Template“.
4.) Click “Edit HTML“.
5.) Now Click Within Code Box.
7.) Now Copy The Below Code And Paste It Between “<body> </body>“.
8.) Click “Save Template” And Done.
OR
1.) Go To Your www.blogger.com
2.) Open Your Desire Blog.
3.) Create A “New Post” Or “Edit” Some One Existing.
4.) Click “Edit HTML” Tab In The Post Editor.
5.) Now Copy The Below Code And Paste
8.) Click “Publish” Or “Update” To Done.
How To Add In Website?
1.) Just Go To Your HTML File.
2.) Now Copy The Below Code And Paste It Between “<body> </body>“.
3.) Save It, Now You Are Done.
<style type="text/css">
.EXE_NAV {
text-align: center;
}
.EXE_NAV nav {
width: 100%;
padding-top: 0.5rem;
background: #fff;
position: fixed;
left: 0; top: 0;
width:100%;
height: 3.5rem;
z-index: 10;
}
.EXE_NAV nav ul {
list-style: none;
width: inherit;
margin: 0;
}
.EXE_NAV ul li:nth-child( 3n + 1), #EXE_MAIN .panel:nth-child( 3n + 1) {
background: rgb( 0, 180, 255 );
}
.EXE_NAV ul li:nth-child( 3n + 2), #EXE_MAIN .panel:nth-child( 3n + 2) {
background: rgb( 255, 65, 180 );
}
.EXE_NAV ul li:nth-child( 3n + 3), #EXE_MAIN .panel:nth-child( 3n + 3) {
background: rgb( 0, 255, 180 );
}
.EXE_NAV ul li {
display: inline-block;
padding: 0.3rem 0.5rem;
border-radius: 2px;
line-height: 1.5;
}
.EXE_NAV ul li a {
color: #fff;
text-decoration: none;
}
.panel {
width: 100%;
height: 500px; /* Your DIVs Height */
z-index:0;
-webkit-transform: translateZ( 0 );
transform: translateZ( 0 );
-webkit-transition: -webkit-transform 0.6s ease-in-out;
transition: transform 0.6s ease-in-out;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.panel h1 {
font-family: sans-serif;
font-size: 64px;
font-size: 4rem;
color: #fff;
position:relative;
line-height: 200px;
top: 33%;
text-align: center;
margin: 0;
}
/* Smooth CSS3 Scrolling */
a[ id= "EXE_DIV1" ]:target ~ #EXE_MAIN article.panel {
-webkit-transform: translateY( 0px);
transform: translateY( 0px );
}
a[ id= "EXE_DIV2" ]:target ~ #EXE_MAIN article.panel {
-webkit-transform: translateY( -500px );
transform: translateY( -500px );
}
a[ id= "EXE_DIV3" ]:target ~ #EXE_MAIN article.panel {
-webkit-transform: translateY( -1000px );
transform: translateY( -1000px );
}
</style>
<a id="EXE_DIV1"></a>
<a id="EXE_DIV2"></a>
<a id="EXE_DIV3"></a>
<div class="EXE_NAV">
<nav>
<ul>
<li><a href="#EXE_DIV1">Blue</a> </li>
<li><a href="#EXE_DIV2">Pink</a> </li>
<li><a href="#EXE_DIV3">Green</a> </li>
</ul>
</nav>
</div>
<section id="EXE_MAIN">
<article class="panel" id="EXE_DIV1">
<h1> Hello Visitor! </h1>
</article>
<article class="panel" id="EXE_DIV2">
<h1> Thanks For Visiting. </h1>
</article>
<article class="panel" id="EXE_DIV3">
<h1> See You Again. </h1>
</article>
</section>
Customization:
1.) Change Blue, Pink, Green With Your DIVs Button Text/Image.
2.) Change <h1> Hello Visitor! </h1>, <h1> Thanks For Visiting. </h1>, <h1> See You Again. </h1> With Your DIVs Content.
3.) Change height: 500px; /* Your DIVs Height */ In CSS.
4.) Now Edit /* Smooth CSS3 Scrolling */ With The DIV Height Ratio.
Save And Done.
Last Word:
This is it what we got over internet. Its slightly confusing but don’t worry, we are here If you need to know about more customizing, feel free to contact us. And if you liked it then share it and leave your feedback. You can contact us too if you have any query.
Be the first to write a comment.