Projavatricks: How To Create Animated Back To Top PlugIn Using JQuery

Reading long article its very irritating to scroll up whole page using scroll bar I recommend you to add simple back to top plugin in you website adding below code.

How To Scroll Up Webpage On A Click Using Jquery:

As we know that jquery has various animations properties by using one of them we can do our task.Here is a syntax of method whic we are going to used in our example.

$('selector').animate({scrollTop : position},time in millisec)

CODE:

<!DOCTYPE html>

<html lang="en">
<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script>
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('.scroll').fadeIn(700);
} else {
$('.scroll').fadeOut(1000);
}
});
$(document).ready(function(){

$('.scroll').click(function(){

$('body').animate({scrollTop : 0},200);

});

});  
</script>
</head>

<!-- Styles -->
<style>
p{
font-size:30px;
width:1100px;
overflow:hidden;
}

.scroll{
width:80px; 
height:100px;
padding:10px; 
text-align:center; 

font-weight: bold;
color: #444;
text-decoration: none;
position:fixed;
bottom:10px;
right:10px;
display:none;

}

</style>
<body>
<p>
jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML. jQuery is the most popular JavaScript library in use today, with installation on 65% of the top 10 million highest-trafficked sites on the Web. jQuery is free, open-source software licensed under the MIT License.

jQuery's syntax is designed to make it easier to navigate a document, select DOM elements, create animations, handle events, and develop Ajax applications. jQuery also provides capabilities for developers to create plug-ins on top of the JavaScript library. This enables developers to create abstractions for low-level interaction and animation, advanced effects and high-level, theme-able widgets. The modular approach to the jQuery library allows the creation of powerful dynamic web pages and web applications.

The set of jQuery core features—DOM element selections, traversal and manipulation—enabled by its selector engine (named "Sizzle" from v1.3), created a new "programming style", fusing algorithms and DOM data structures. This style influenced the architecture of other JavaScript frameworks like YUI v3 and Dojo, later stimulating the creation of the standard Selectors API.

Microsoft and Nokia bundle jQuery on their platforms. Microsoft includes it with Visual Studio for use within Microsoft's ASP.NET AJAX framework and ASP.NET MVC Framework while Nokia has integrated it into the Web Run-Time widget development platform. jQuery has also been used in MediaWiki since version 1.16.
jQuery, at its core, is a DOM (Document Object Model) manipulation library. The DOM is a tree-structure representation of all the elements of a web-page and jQuery simplifies the syntax for finding, selecting, and manipulating these DOM elements. For example, jQuery can be used for finding an element in the document with a certain property (e.g. all elements with an h1 tag), changing one or more of its attributes (e.g. color, visibility), or making it respond to an event (e.g. a mouse click).

jQuery also provides a paradigm for event handling that goes beyond basic DOM element selection and manipulation. The event assignment and the event callback function definition are done in a single step in a single location in the code. jQuery also aims to incorporate other highly used JavaScript functionality (e.g. fade ins and fade outs when hiding elements, animations by manipulating CSS properties).
</p>
<input type="image" class="scroll" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxegPdUNYx0RIZtPXW7X5zDmQzCkCFlAFP3ZtMvdjUqzF99oPFWxueW-Q_agb0yOJSJT6tiGNuQsZ_7LhN3Vy3nFIZAh5_EuPsawhcw7C3Xs2XTiU7XskURETUIv1K_0k3cOoa-L5WjMGt/s1600/backtotop.jpg"></input>

</body>
</html>

Projavatricks

Friday, 27 November 2015

How To Create Animated Back To Top PlugIn Using JQuery

How To Scroll Up Webpage On A Click Using Jquery:

CODE:

Live Demo

No comments:

Post a Comment