jQuery is one of the most
in-demand JavaScript libraries now a day. Enormous features have been
developed and implemented by the veterans and programmers in jQuery
for the websites and applications. 'Go to Top' is a very common
feature from all of those developments. Usually you might have
noticed an arrow pointing to top at very right bottom side.
So, I decided to develop a
code in jQuery for you. I developed everything from the scratch
without any help of any source. My teacher Mr. Ravi he helped me a
lot in it and I hope you will like it.
So, I decided to develop a
code in jQuery for you. I developed everything from the scratch
without any help of any source. My teacher Mr. Ravi he helped me a
lot in it and I hope you will like it.
1. I created html file, within that file I put some links as well as paragraph in body section. I added [UP ARROW IMAGE ] LINK through <a href=”#”>.
<div
id="header">
<p>Go To Top Using jQuery </p> <p>Welcome To ADMEC </p></div> <div id="content"> <div id="lit">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus urna orci, varius vel consectetur luctus, auctor eu velit. Suspendisse volutpat metus in elit maximus, vel accumsan elit venenatis. Vestibulum nec malesuada erat. Proin eu finibus felis. Maecenas laoreet turpis a nunc cursus, bibendum tristique nisl ultrices. Mauris rhoncus orci nec velit blandit vehicula quis nec nibh. Nulla vulputate imperdiet volutpat. Phasellus vestibulum finibus finibus. Cras vitae nisi sed tortor sollicitudin lobortis non a est. Mauris semper mi dolor, vel ultricies elit vestibulum tristique. Proin laoreet ac libero quis sodales. Proin tempus finibus suscipit. Nulla magna felis, imperdiet lobortis aliquam sit amet, fermentum eu augue. Cras ultrices mauris eu lorem malesuada gravida at in felis. Proin eu congue velit.
</div>
<div id="lit">Aenean justo nulla, aliquet in enim in, faucibus finibus orci. In at lacus volutpat, suscipit diam et, pulvinar odio. Curabitur vitae fermentum odio. Maecenas dictum suscipit libero vitae elementum. Praesent luctus metus eu erat iaculis, non pharetra sem pharetra. Vivamus neque odio, porttitor a magna quis, efficitur viverra dolor. Etiam sem dui, scelerisque vel diam id, egestas gravida lacus.
</div>
</div>
<div id="lit">Maecenas ultrices bibendum viverra. Nullam aliquam auctor odio vitae tristique. Ut lobortis lobortis ligula et laoreet. Mauris malesuada, libero sit amet facilisis ultrices, elit elit pharetra nibh, sed sollicitudin sapien ligula ut lacus. Curabitur suscipit velit a turpis vulputate egestas. Donec turpis ipsum, volutpat at tortor nec, tincidunt imperdiet ex. Praesent et ex blandit, accumsan ante quis, iaculis nisi. Quisque sit amet dui consectetur, feugiat ipsum nec, aliquam lorem.
</div>
</div>
<div id="lit">Aliquam lacinia nibh et erat pretium ornare. Aenean nisi ipsum, fringilla non leo sed, accumsan facilisis justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi faucibus purus tortor, quis convallis tortor hendrerit non. Nullam arcu dolor, venenatis nec lacinia eu, ultricies et est. Mauris vitae lobortis tellus. Sed scelerisque metus ac convallis ullamcorper. Nullam ultrices vel nisl sit amet ullamcorper. In mattis sapien odio, vulputate convallis nisl suscipit nec. Etiam vehicula rhoncus urna ac suscipit. Ut vehicula quis nunc sit amet volutpat. In vitae metus id sapien porttitor sollicitudin non porta metus. Proin quis aliquet nisi, a finibus ante. Nullam ut lacus sit amet mauris condimentum efficitur. Suspendisse potenti. Mauris luctus odio a turpis vulputate, vitae fringilla augue convallis
</div>
</div>
</div>
<a href="#" class="scroll_top" />
2. I added some CSS also.
<style type="text/css">
#header{
border: dotted 2px;
height: 150px;
text-align: center;
color: blue;
margin: auto;
font-size: 28px;
font-weight: bold;
margin-bottom: 30px;
}
a{ text-decoration:none; }
.scroll_top{
width:50px;
height:50px;
position:fixed;
bottom:40px;
right:80px;
background: url('go_top_icon.png') no-repeat;
}
#content{
text-align: center;
font-size:24px;
}
#lit{
height: 40px;
margin: auto;;
width:900px;
border: solid 1px;
}
</style>
3. I have used Library Link of jQuery in the <head> of the page. [http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"]
4. I have declared function within <script type="text/javascript"> </script>. Always put your JavaScript just before your closing body (</body>) to load your page faster.
<script type="text/javascript">
$(document).ready(function(){
$('.scroll_top').hide();
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('.scroll_top').fadeIn();
} else {
$('.scroll_top').fadeOut();
}
});
<script type="text/javascript">
$(document).ready(function(){
$('.scroll_top').hide();
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('.scroll_top').fadeIn();
} else {
$('.scroll_top').fadeOut();
}
});
$('.scroll_top').click(function(){
$("html, body").animate({ scrollTop: 0 }, 500);
return false;
});
});
</script>
In above mentioned jQuery Code $('.scroll_top').hide(); here .scroll_top is being hidden through hide() api which is defined in jQuery library.
$("html, body").animate({ scrollTop: 0 }, 500);
return false;
});
});
</script>
In above mentioned jQuery Code $('.scroll_top').hide(); here .scroll_top is being hidden through hide() api which is defined in jQuery library.
Then I passed the function
$(window).scroll(function(){}); within that function I passed the if
else condition using jQuery API fadeIn() and fadeOut(). It helped in
showing the arrow only when some one scrolls down the page.
At last I called the
click(function()) on the event which has scroll class attached to it
and inside this function I passed a parameter (html) with animate
API. when I click the UP Arrow Button It will scroll the entire page
Up.
The designing of title in
animated videos represents the first impression to the audience and
it's called right key to get the audience in the right mood for your
work and skill.
