{"id":468,"date":"2018-05-11T15:07:13","date_gmt":"2018-05-11T09:37:13","guid":{"rendered":"http:\/\/blog.openwebsolutions.in\/?p=468"},"modified":"2018-05-11T15:57:43","modified_gmt":"2018-05-11T10:27:43","slug":"scroll-top-website-using-jquery","status":"publish","type":"post","link":"https:\/\/openwebsolutions.in\/blog\/scroll-top-website-using-jquery\/","title":{"rendered":"Scroll to top of a website using Jquery"},"content":{"rendered":"<p>&nbsp;<\/p>\n<p>In this article we are going to explain how to scroll up on click of a button using simple Jquery. So what we need to do that. We need a simple web page layout, some knowledge in CSS and Jquery. Please note, if we have simple HTML pages then place it anywhere but if the projects are made of many templates (like header.php, footer.php, content.php) , then we need to place the element to any of a common template (eg. footer.php). We suggest to place the element in footer. In this case we have used Font Awesome for the arrow icon.<\/p>\n<p>&nbsp;<\/p>\n<h4><strong>HTML<\/strong><\/h4>\n<pre>&lt;a href=\"javascript:void(0)\" class=\"scroll-to-top\"&gt;&lt;i class=\"fa fa-arrow-up\"&gt;&lt;\/i&gt;&lt;\/a&gt;<\/pre>\n<p>&nbsp;<\/p>\n<h4><strong>CSS<\/strong><\/h4>\n<pre>\/* style the button as per your design, here is a simple style *\/\r\n.scroll-to-top {\r\n    position: fixed;\r\n    bottom: -100px;\r\n    right: 30px;\r\n    \/*display: none;*\/ \/* this is optional if you want fadeIn\/fadeOut effect *\/\r\n    width: 60px;\r\n    height: 60px;\r\n    background-color: #cccccc;\r\n    text-align: center;\r\n    border-radius: 100%;\r\n    color: #000000;\r\n    font-size: 20px;\r\n    padding-top: 15px;\r\n    transition: all 0.3s ease;\r\n    -moz-transition: all 0.3s ease;\r\n    -webkit-transition: all 0.3s ease;\r\n}<\/pre>\n<pre>\/* here we will use an optional class for the css3 animation *\/\r\n.animate-button {\r\n     transition: all 0.3s ease;\r\n     -moz-transition: all 0.3s ease;\r\n     -webkit-transition: all 0.3s ease;\r\n     bottom: 30px;\r\n}<\/pre>\n<p>&nbsp;<\/p>\n<h4><strong>JQUERY<\/strong><\/h4>\n<pre>$(document).ready(function() {\r\n\r\n    \/\/check whether a user scroll down to some pixels\r\n    $(window).scroll(function() {\r\n        if($(this).scrollTop() &gt; 500) {\r\n            $('.scroll-to-top').addClass('animate-button');\r\n        }\r\n        else {\r\n            $('.scroll-to-top').removeClass('animate-button);\r\n        }\r\n    });\r\n\r\n    \/\/scroll to top\r\n    $('.scroll-to-top').click(function() {\r\n        $('html, body').animate({\r\n            scrollTop: 0\r\n        }, 800);\r\n        return false;\r\n    });\r\n\r\n});\r\n\r\n\r\n<\/pre>\n<p>That is all about scroll to top by simply using Jquery and HTML\/CSS. Hope you like it.<\/p>\n<p>Please share&#8230;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>&nbsp; In this article we are going to explain how to scroll up on click of a button using simple Jquery. So what we need to do that. We need a simple web page layout, some knowledge in CSS and Jquery. Please note, if we have simple HTML pages then place it anywhere but if [&hellip;]<\/p>\n","protected":false},"author":10,"featured_media":470,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[3],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v14.8.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Scroll to top of a website using Jquery - Openweb Solutions Blog<\/title>\n<meta name=\"robots\" content=\"index, follow\" \/>\n<meta name=\"googlebot\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta name=\"bingbot\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/openwebsolutions.in\/blog\/scroll-top-website-using-jquery\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Scroll to top of a website using Jquery - Openweb Solutions Blog\" \/>\n<meta property=\"og:description\" content=\"&nbsp; In this article we are going to explain how to scroll up on click of a button using simple Jquery. So what we need to do that. We need a simple web page layout, some knowledge in CSS and Jquery. Please note, if we have simple HTML pages then place it anywhere but if [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/openwebsolutions.in\/blog\/scroll-top-website-using-jquery\/\" \/>\n<meta property=\"og:site_name\" content=\"Openweb Solutions Blog\" \/>\n<meta property=\"article:published_time\" content=\"2018-05-11T09:37:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-05-11T10:27:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/openwebsolutions.in\/blog\/wp-content\/uploads\/2018\/05\/banner-goto-top.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"497\" \/>\n<meta name=\"twitter:card\" content=\"summary\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/openwebsolutions.in\/blog\/#website\",\"url\":\"https:\/\/openwebsolutions.in\/blog\/\",\"name\":\"Openweb Solutions Blog\",\"description\":\"Transforming ideas into reality\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/openwebsolutions.in\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/openwebsolutions.in\/blog\/scroll-top-website-using-jquery\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/openwebsolutions.in\/blog\/wp-content\/uploads\/2018\/05\/banner-goto-top.jpg\",\"width\":1024,\"height\":497,\"caption\":\"banner-goto-top\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/openwebsolutions.in\/blog\/scroll-top-website-using-jquery\/#webpage\",\"url\":\"https:\/\/openwebsolutions.in\/blog\/scroll-top-website-using-jquery\/\",\"name\":\"Scroll to top of a website using Jquery - Openweb Solutions Blog\",\"isPartOf\":{\"@id\":\"https:\/\/openwebsolutions.in\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/openwebsolutions.in\/blog\/scroll-top-website-using-jquery\/#primaryimage\"},\"datePublished\":\"2018-05-11T09:37:13+00:00\",\"dateModified\":\"2018-05-11T10:27:43+00:00\",\"author\":{\"@id\":\"https:\/\/openwebsolutions.in\/blog\/#\/schema\/person\/615090f954d8460cf6186cf920b47398\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/openwebsolutions.in\/blog\/scroll-top-website-using-jquery\/\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/openwebsolutions.in\/blog\/#\/schema\/person\/615090f954d8460cf6186cf920b47398\",\"name\":\"Preetam Mallick\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/openwebsolutions.in\/blog\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/ed836329485e177373e4ff5323b6670a?s=96&r=g\",\"caption\":\"Preetam Mallick\"},\"description\":\"Frontend developer at Openweb Solutions\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/posts\/468"}],"collection":[{"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/comments?post=468"}],"version-history":[{"count":5,"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/posts\/468\/revisions"}],"predecessor-version":[{"id":474,"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/posts\/468\/revisions\/474"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/media\/470"}],"wp:attachment":[{"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/media?parent=468"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/categories?post=468"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/tags?post=468"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}