{"id":82,"date":"2020-06-30T11:03:57","date_gmt":"2020-06-30T11:03:57","guid":{"rendered":"http:\/\/santosh-shah.com\/blog\/jquery-animate-back-to-top\/"},"modified":"2020-06-30T11:03:57","modified_gmt":"2020-06-30T11:03:57","slug":"jquery-animate-back-to-top","status":"publish","type":"post","link":"https:\/\/santosh-shah.com\/blog\/jquery-animate-back-to-top\/","title":{"rendered":"Jquery animate back to top"},"content":{"rendered":"<p>Jquery animate back to top will provide an easy way to the user to scroll or animate back to top.<\/p>\n<h2>HTML Markup for jquery animate back to top<\/h2>\n<p>Following is the html markup. Copy and paste it in to your html document where you want it to appear. Add the required css style of your own.<\/p>\n<pre>&lt;a id=\"back-to-top\" style=\"display: block;\" href=\"#top\"&gt;Back to top&lt;\/a&gt;<\/pre>\n<h2>Jquery code to animate back to top<\/h2>\n<p>With jquery it is just a couple code that helps to make it work in all browsers. My first code checks that, if the scroll position from the top is greater than 100 then the #back-to-top is fade in(show) else its fadeout(hide). After that I have to write one more function to work on click event of the #back-to-top.<\/p>\n<pre>\u00a0<\/pre>\n\n\n<pre class=\"wp-block-code\"><code>&lt;script type=\"text\/javascript\" src=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.4.3\/jquery.min.js\" >&lt;\/script> &lt;script> $(document).ready(function(){ \/\/ hide #back-top first $(\"#back-top\").hide(); \/\/ fade in #back-to-top $(function () { $(window).scroll(function () { if ($(this).scrollTop() > 100) { $('#back-to-top').fadeIn(); } else { $('#back-to-top').fadeOut(); } }); \/\/ scroll body to 0px on click $('#back-top').click(function () { $('body,html').animate({ scrollTop: 0 }, 800); return false; }); }); }); &lt;\/script><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Jquery animate back to top will provide an easy way to the user to scroll or animate back to top. HTML Markup for jquery animate back to top Following is the html markup. Copy and paste it in to your html document where you want it to appear. Add the required css style of your [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-82","post","type-post","status-publish","format-standard","hentry","category-jquery"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Jquery animate back to top - Santosh Kumar Shah<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/santosh-shah.com\/blog\/jquery-animate-back-to-top\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Jquery animate back to top - Santosh Kumar Shah\" \/>\n<meta property=\"og:description\" content=\"Jquery animate back to top will provide an easy way to the user to scroll or animate back to top. HTML Markup for jquery animate back to top Following is the html markup. Copy and paste it in to your html document where you want it to appear. Add the required css style of your [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/santosh-shah.com\/blog\/jquery-animate-back-to-top\/\" \/>\n<meta property=\"og:site_name\" content=\"Santosh Kumar Shah\" \/>\n<meta property=\"article:published_time\" content=\"2020-06-30T11:03:57+00:00\" \/>\n<meta name=\"author\" content=\"Santosh Kumar Shah\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Santosh Kumar Shah\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/santosh-shah.com\/blog\/jquery-animate-back-to-top\/\",\"url\":\"https:\/\/santosh-shah.com\/blog\/jquery-animate-back-to-top\/\",\"name\":\"Jquery animate back to top - Santosh Kumar Shah\",\"isPartOf\":{\"@id\":\"https:\/\/santosh-shah.com\/blog\/#website\"},\"datePublished\":\"2020-06-30T11:03:57+00:00\",\"author\":{\"@id\":\"https:\/\/santosh-shah.com\/blog\/#\/schema\/person\/b17cb45bdd5f518e74a08ad2c6c4b39f\"},\"breadcrumb\":{\"@id\":\"https:\/\/santosh-shah.com\/blog\/jquery-animate-back-to-top\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/santosh-shah.com\/blog\/jquery-animate-back-to-top\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/santosh-shah.com\/blog\/jquery-animate-back-to-top\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/santosh-shah.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Jquery animate back to top\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/santosh-shah.com\/blog\/#website\",\"url\":\"https:\/\/santosh-shah.com\/blog\/\",\"name\":\"Santosh Kumar Shah\",\"description\":\"JavaScript Developer\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/santosh-shah.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/santosh-shah.com\/blog\/#\/schema\/person\/b17cb45bdd5f518e74a08ad2c6c4b39f\",\"name\":\"Santosh Kumar Shah\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/santosh-shah.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/cf46c57219d897547f3204b6b302169b3302b17507ccc902946b622a78d0b98b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/cf46c57219d897547f3204b6b302169b3302b17507ccc902946b622a78d0b98b?s=96&d=mm&r=g\",\"caption\":\"Santosh Kumar Shah\"},\"description\":\"I am JavaScript developer.\",\"sameAs\":[\"https:\/\/santosh-shah.com\/blog\"],\"url\":\"https:\/\/santosh-shah.com\/blog\/author\/sks7yu\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Jquery animate back to top - Santosh Kumar Shah","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/santosh-shah.com\/blog\/jquery-animate-back-to-top\/","og_locale":"en_US","og_type":"article","og_title":"Jquery animate back to top - Santosh Kumar Shah","og_description":"Jquery animate back to top will provide an easy way to the user to scroll or animate back to top. HTML Markup for jquery animate back to top Following is the html markup. Copy and paste it in to your html document where you want it to appear. Add the required css style of your [&hellip;]","og_url":"https:\/\/santosh-shah.com\/blog\/jquery-animate-back-to-top\/","og_site_name":"Santosh Kumar Shah","article_published_time":"2020-06-30T11:03:57+00:00","author":"Santosh Kumar Shah","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Santosh Kumar Shah","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/santosh-shah.com\/blog\/jquery-animate-back-to-top\/","url":"https:\/\/santosh-shah.com\/blog\/jquery-animate-back-to-top\/","name":"Jquery animate back to top - Santosh Kumar Shah","isPartOf":{"@id":"https:\/\/santosh-shah.com\/blog\/#website"},"datePublished":"2020-06-30T11:03:57+00:00","author":{"@id":"https:\/\/santosh-shah.com\/blog\/#\/schema\/person\/b17cb45bdd5f518e74a08ad2c6c4b39f"},"breadcrumb":{"@id":"https:\/\/santosh-shah.com\/blog\/jquery-animate-back-to-top\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/santosh-shah.com\/blog\/jquery-animate-back-to-top\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/santosh-shah.com\/blog\/jquery-animate-back-to-top\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/santosh-shah.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Jquery animate back to top"}]},{"@type":"WebSite","@id":"https:\/\/santosh-shah.com\/blog\/#website","url":"https:\/\/santosh-shah.com\/blog\/","name":"Santosh Kumar Shah","description":"JavaScript Developer","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/santosh-shah.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/santosh-shah.com\/blog\/#\/schema\/person\/b17cb45bdd5f518e74a08ad2c6c4b39f","name":"Santosh Kumar Shah","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/santosh-shah.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/cf46c57219d897547f3204b6b302169b3302b17507ccc902946b622a78d0b98b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cf46c57219d897547f3204b6b302169b3302b17507ccc902946b622a78d0b98b?s=96&d=mm&r=g","caption":"Santosh Kumar Shah"},"description":"I am JavaScript developer.","sameAs":["https:\/\/santosh-shah.com\/blog"],"url":"https:\/\/santosh-shah.com\/blog\/author\/sks7yu\/"}]}},"_links":{"self":[{"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/posts\/82","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/comments?post=82"}],"version-history":[{"count":0,"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/posts\/82\/revisions"}],"wp:attachment":[{"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/media?parent=82"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/categories?post=82"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/santosh-shah.com\/blog\/wp-json\/wp\/v2\/tags?post=82"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}