{"id":1985,"date":"2016-06-17T10:13:32","date_gmt":"2016-06-17T10:13:32","guid":{"rendered":"http:\/\/www.jquery-az.com\/?p=1985"},"modified":"2023-10-03T09:32:32","modified_gmt":"2023-10-03T09:32:32","slug":"scroll-top-by-using-jquery-2-demos","status":"publish","type":"post","link":"https:\/\/www.jquery-az.com\/scroll-top-by-using-jquery-2-demos\/","title":{"rendered":"jQuery scrolltop: 2 demos"},"content":{"rendered":"

The scroll-top jQuery plug-in<\/strong><\/h3>\n

If you are looking to give an option to the visitors of your website for moving top of your web page by using an up arrow then I am going to show you a jQuery based solution for that.<\/p>\n

The jQuery plug-in, ap-scroll-top<\/em>, can be used easily with flexible options in your web pages. So, if you are already using jQuery in your web project, then adding scroll to top feature with a\u00a0nice looking arrow and various options is easy and light-weight.<\/p>\n

(Download the plug-in from Github website here<\/a>)<\/p>\n

See the live demos and setting up guide in the section below.<\/p>\n

A demo of jQuery scrolltop with right arrow and fast speed<\/strong><\/h3>\n

By using the\u00a0ap-scroll-top plug-in, you may specify the position or height where move to top<\/strong> <\/em>arrow should appear in the web page. You may also specify the speed of scroll, position i.e. left bottom, right bottom, center etc. You may also set where scrolling should end on top. See the following demo for specifying different options and see the output on the fly:<\/p>\n

\"jQuery<\/p>\n

See online demo and code<\/strong><\/h6>\n

In the demo page, you can see a few visible options. The \u201cenabled\u201d checkbox is to enable the plug-in. The scroll speed<\/em><\/strong> option specifies the speed by which page will scroll up as you click the arrow. Select different values like 100ms, 200ms<\/em>, etc and see how it looks. Similarly, try other options from the dropdown, scroll down to the\u00a0page and click on the\u00a0arrow to move top.<\/p>\n

You may also select Visibility Fade Speed option for arrow fading effect.<\/p>\n

For setting up this plug-in, include the reset, style and ap-scroll-top<\/em> CSS files extracted from the downloaded package of the plug-in. You may also get these from the demo page\u2019s view source option.<\/p>\n

\u00a0 <link rel=”stylesheet” href=”css\/ap-scroll-top\/reset.css” type=”text\/css” media=”all” \/><\/p>\n

<link rel=”stylesheet” href=”css\/ap-scroll-top\/style.css” type=”text\/css” media=”all” \/><\/p>\n

<link rel=”stylesheet” href=”css\/ap-scroll-top\/ap-scroll-top.css” type=”text\/css” media=”all” \/><\/p><\/blockquote>\n

Also include the jQuery and ap-scroll-top JS files in the <head> section:<\/p>\n

<script src=”\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.12.2\/jquery.min.js”><\/script><\/p>\n

<script src=”js\/ap-scroll-top\/ap-scroll-top.js”><\/script><\/p><\/blockquote>\n

The markup section contains the code or content you intend to use. For the demo, it only used a few images to have a long scroll bar in the page.<\/p>\n

Finally, the script section above the <\/body> tag. You may set different options there for the move to top.<\/p>\n

A demo with a few custom values \u2013 speed, position etc.<\/strong><\/h3>\n

In above demo, the dropdowns are given for selecting different options and you may check how scroll-top plug-in works.\u00a0 As enabling it to work with your project, you will need to set certain options at development time. For example, which place to use the Move top arrow, height or pixels from top where the arrow should appear after scrolling down, speed of scrolling etc.<\/p>\n

The following example will show you the code with different options like position, scroll speed, arrow direction etc. See the demo and code below:<\/p>\n

\"jQuery<\/p>\n

See online demo and code<\/strong><\/h6>\n

The markup remains the same as in above example, look at following jQuery code at the last part:<\/p>\n

\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ Add change events for options\r\n\r\n\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $.apScrollTop('option', 'scrollSpeed', 3000);\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $.apScrollTop('option', 'position', 'bottom left');\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $.apScrollTop('option', 'visibilityTrigger', '1000');\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $.apScrollTop('option', 'visibilityFadeSpeed', 2000);<\/pre>\n
 <\/p>\n
This sets the options from the\u00a0startup of the\u00a0arrow to the left bottom. The arrow will display at 1000px and it will fade in 2 seconds.<\/p>\n","protected":false},"excerpt":{"rendered":"
The scroll-top jQuery plug-in If you are looking to give an option to the visitors of your website for moving top of your web page by using an up arrow then I am going to show you a jQuery based solution for that. The jQuery plug-in, ap-scroll-top, can be used easily with flexible options in … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":1987,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[2],"tags":[],"yoast_head":"\njQuery scrolltop: 2 demos<\/title>\n<meta name=\"robots\" content=\"noindex, follow\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"jQuery scrolltop: 2 demos\" \/>\n<meta property=\"og:description\" content=\"The scroll-top jQuery plug-in If you are looking to give an option to the visitors of your website for moving top of your web page by using an up arrow then I am going to show you a jQuery based solution for that. The jQuery plug-in, ap-scroll-top, can be used easily with flexible options in ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jquery-az.com\/scroll-top-by-using-jquery-2-demos\/\" \/>\n<meta property=\"article:published_time\" content=\"2016-06-17T10:13:32+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-03T09:32:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/06\/73.0_2-jQuery-scroll-top-le.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"566\" \/>\n\t<meta property=\"og:image:height\" content=\"552\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"jqueryaz\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"jqueryaz\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jquery-az.com\/scroll-top-by-using-jquery-2-demos\/\",\"url\":\"https:\/\/www.jquery-az.com\/scroll-top-by-using-jquery-2-demos\/\",\"name\":\"jQuery scrolltop: 2 demos\",\"isPartOf\":{\"@id\":\"https:\/\/www.jquery-az.com\/#website\"},\"datePublished\":\"2016-06-17T10:13:32+00:00\",\"dateModified\":\"2023-10-03T09:32:32+00:00\",\"author\":{\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jquery-az.com\/scroll-top-by-using-jquery-2-demos\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jquery-az.com\/scroll-top-by-using-jquery-2-demos\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jquery-az.com\/scroll-top-by-using-jquery-2-demos\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.jquery-az.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"jQuery scrolltop: 2 demos\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jquery-az.com\/#website\",\"url\":\"https:\/\/www.jquery-az.com\/\",\"name\":\"\",\"description\":\"PHP, Bootstrap, jQuery, CSS, Python, Java and others\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jquery-az.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3\",\"name\":\"jqueryaz\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g\",\"caption\":\"jqueryaz\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"jQuery scrolltop: 2 demos","robots":{"index":"noindex","follow":"follow"},"og_locale":"en_US","og_type":"article","og_title":"jQuery scrolltop: 2 demos","og_description":"The scroll-top jQuery plug-in If you are looking to give an option to the visitors of your website for moving top of your web page by using an up arrow then I am going to show you a jQuery based solution for that. The jQuery plug-in, ap-scroll-top, can be used easily with flexible options in ... Read more","og_url":"https:\/\/www.jquery-az.com\/scroll-top-by-using-jquery-2-demos\/","article_published_time":"2016-06-17T10:13:32+00:00","article_modified_time":"2023-10-03T09:32:32+00:00","og_image":[{"width":566,"height":552,"url":"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/06\/73.0_2-jQuery-scroll-top-le.jpg","type":"image\/jpeg"}],"author":"jqueryaz","twitter_misc":{"Written by":"jqueryaz","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jquery-az.com\/scroll-top-by-using-jquery-2-demos\/","url":"https:\/\/www.jquery-az.com\/scroll-top-by-using-jquery-2-demos\/","name":"jQuery scrolltop: 2 demos","isPartOf":{"@id":"https:\/\/www.jquery-az.com\/#website"},"datePublished":"2016-06-17T10:13:32+00:00","dateModified":"2023-10-03T09:32:32+00:00","author":{"@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3"},"breadcrumb":{"@id":"https:\/\/www.jquery-az.com\/scroll-top-by-using-jquery-2-demos\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jquery-az.com\/scroll-top-by-using-jquery-2-demos\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.jquery-az.com\/scroll-top-by-using-jquery-2-demos\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.jquery-az.com\/"},{"@type":"ListItem","position":2,"name":"jQuery scrolltop: 2 demos"}]},{"@type":"WebSite","@id":"https:\/\/www.jquery-az.com\/#website","url":"https:\/\/www.jquery-az.com\/","name":"","description":"PHP, Bootstrap, jQuery, CSS, Python, Java and others","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jquery-az.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3","name":"jqueryaz","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g","caption":"jqueryaz"}}]}},"_links":{"self":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/1985"}],"collection":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/comments?post=1985"}],"version-history":[{"count":2,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/1985\/revisions"}],"predecessor-version":[{"id":10329,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/1985\/revisions\/10329"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/media\/1987"}],"wp:attachment":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/media?parent=1985"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/categories?post=1985"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/tags?post=1985"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}