On hover line filling color

when you start scrolling the web page The arrow will appears at the bottom right corner of a web page . When clicked, it brings you back to the top of the page.

When we hover over a button the cursor changes to a pointer, and the background becomes a red. In order to make the transition smooth, we assign the transition of 400ms ease all to the background-color property. Also, when we click the button, the background color also changes . When you click button, this page scroll to top of the position.

onclick="$('html,body').animate({scrollTop:0},'slow'); .animate() method is the list of properties which we should animate. we used a property called scrollTop, and we want it to have a value of 0.

HTML

<div class="container">
    <div  class="hidden123" id="top-link-block" style="position:absolute;bottom:30px;right:30px;cursor:pointer;">
	    <p class="gotop" onclick="$('html,body').animate({scrollTop:0},'slow');return false;">
		  <span class="text-center mbn"> TOP </span>
		</p>
	</div>
 </div>

we are using anthor parmeter the speed with which we want our animation to run. It is measured in milliseconds and the higher the number, the slower the animation. Finally, we apply the animate method to the HTML and body elements on our web page.

Now each time when we click the button, it will take us to the top of the page.

CSS

.gotop {
    left: 49.5%;
    bottom: 45px;
    margin-bottom: 0px;
    height: 80px;
}
.gotop span {
    margin-top: 0;
    display: block;
    transition: 400ms ease all;
    text-transform: uppercase;
    color: #f5006f;
    z-index: 9;
    position: relative;
    top: 0px;
}
.gotop:after {
    content: '';
    width: 2px;
    height: 50px;
    background-size: 100% 200%;
    background-image: linear-gradient(to top, #f5006f 50%, #585858 50%);
    position: absolute;
    left: 11px;
    bottom: 0px;
    transition: 400ms ease all;
}
.gotop:hover span {
    top: -25px;
    display: block;
    transition: 400ms ease all;
}
.gotop:hover:after {
    content: '';
    background-position: 0 100%;
    transition: 400ms ease all;
    height: 70px;
}

How does it works ?

step1: copy css and paste in style.csss page or paste under head tag.

step2: Add div structure in body page

Output

This “top-link-block” link allows users to smoothly scroll back to the top of the page.

Leave a Reply

Your email address will not be published. Required fields are marked *