jQuery Back to top

Today, We want to share with you jQuery Back to top.In this post we will show you floating back to top button html, hear for Creating a Back to Top Button with CSS & jQuery we will give you demo and example for implement.In this post, we will learn about Back to Top Button using jQuery and CSS with an example.

jQuery Back to top

There are the Following The simple About jQuery Back to top Full Information With Example and source code.

As I will cover this Post with live Working example to develop bootstrap back to top smooth, so the scroll to top jquery for this example is following below.

BackToTop Button Script

index.html

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>jQuery Back To Top Button by pakainfo.com</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $(window).pagebacktotop(function(){
        if($(this).pagebacktotopTop() > 100){
            $('#pagebacktotop').fadeIn();
        }else{
            $('#pagebacktotop').fadeOut();
        }
    });
    $('#pagebacktotop').click(function(){
        $("html, body").animate({ pagebacktotopTop: 0 }, 600);
        return false;
    });
});
</script>
<style type="text/css">
/* simple BackToTop button css */
#pagebacktotop {
    position:fixed;
    right:10px;
    bottom:10px;
    cursor:pointer;
    width:50px;
    height:50px;
    background-color:#3498db;
    text-indent:-9999px;
    display:none;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
}
#pagebacktotop span {
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-8px;
    margin-top:-12px;
    height:0;
    width:0;
    border:8px solid transparent;
    border-bottom-color:#ffffff
}
#pagebacktotop:hover {
    background-color:#e74c3c;
    opacity:1;
    filter:"alpha(opacity=100)";
    -ms-filter:"alpha(opacity=100)";
}
</style>
</head>
<body>

<!-- jquery BackToTop Button -->
<a href="javascript:void(0);" id="pagebacktotop" title="Scroll to Top" style="display: none;">Top<span></span></a>

<p>In this Example,First of all Add or Include External Libs Like as a(jQuery, css etc..), and then create a simple index.php or index.html page.After that crate a simple javascript file like as a index.js or main.js, It is also add your web-application First Header Part to some priority set.After that Include your relevant CSS Class.</p>

<p>I hope you have Got What is <b>Free Download Source Code with Example</b> And how it works.I would Like to have FeedBack From My Blog(infinityknow.com) readers.Your Valuable FeedBack,Any Question,or any Comments about This Article(infinityknow.com) Are Most Always Welcome.</p>

<p>Hello! I am angular Web-devloper and infinityknow is my web technologies blog. My specialities are Vuejs,API,angularjs,Vuejs,PHP, API, jQuery,Earn money,HTML,CSS eCommerce,JS,Laravel, CMS and bespoke web application development.</p>

<p>pakainfo.com is the most popular Programming & Web Development blog. Our mission is to provide the best online resources on programming and web development. We deliver the useful and best tutorials for web professionals — developers, programmers, freelancers and site owners. Any visitors of this site are free to browse our tutorials, live demos and download scripts.</p>

<p>Hello Friends, I have started youtube channel. Name of the channel is Angularjs Examples. Here I have uploaded the first video about Tutorials Angularjs. and will continue to provide videos on different topics of Angularjs. Please share the message with needy people who want to do Angularjs. So, please Like, Share and Subscribe the channel. Thank You.</p>

</body>
</html>

Web Programming Tutorials Example with Demo

Read :

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about jQuery Back to top.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.


Related FAQ

Here are some more FAQ related to this Article:

  1.   sticky Scroll Back to Top Button using jQuery and CSS
  2.   How to Validate Phone Numbers using jQuery and Reqular Expression?
  3.   how to create custom plugin in wordpress from scratch
  4.   Page Redirect after X seconds wait using jQuery
  5.   Back to Top Button using jQuery and CSS - Scroll to Top Example
  6.   jquery AJAX Dynamically Add remove PHP MySQLi
  7.   jQuery An Animated Scroll To Top Button
  8.   Simple Scroll Back to Top Plugin Examples with demo
  9.   PHP crud Mysqli Select Insert Update and Delete query
  10.   Responsive back to top using jquery