English | Japanese

jQuery Plugin
BACK TO THE TOP

Back to the Top is a jQuery plugin to return to scroll smoothly to the top of the page. You can scroll to the smooth anchor link in the page.

Settings

  1. Setting the jQuery
  2. Setting the jquery.easing
  3. Setting the jquery.backtothetop
  4. Setting anchor link in the page
  5. Operation check

1. Setting the jQuery

jQuery (>= 1.7.1) loaded in your page.

Download the jQuery from jquery.com. Or set the jQuery that is delivered from the CDN.

Download jQuery

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-3.3.2.min.js"></script>

2. Setting the jquery.easing

jquery.easing loaded in your page.

The easing in the jQuery are only swing or linear. The easing functions are available with the use of plugins the jquery.easing or the jQuery UI.

Download the jquery.easing. Or set the jquery.easing that is delivered from the CDN.

Download jquery.easing, or CDN
Download jQuery UI 

<script src=""https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js""></script>

3. Setting the jquery.backtothetop

jquery.backtothetop.js loaded in your page.

Download the jquery.backtothetop.min.js. Set the script tag to HTML, like this:

<script src="https://DOMAIN/PATH/TO/jquery.backtothetop.min.js"></script>

4. Setting anchor link in the page

Set anchor link in the page. If you want to set the easing and speed, Set the options referring to the Settings > Advanced.

To the top of the page

  1. Add a # in the href attribute of the anchor link.
  2. Add a backtothetop-fixed in the id attribute of the anchor link.

Sample

html 
<body>

...

<a href="#" id="backtothetop-fixed">Back to the Top</a>

Way to attach an attribute value as follows.

  1. Add a #** in the href attribute of the anchor link. The attribute value is to your liking.
  2. Add a backtothetop-fixed in the id attribute of the anchor link.
  3. Add a ** in an id attribute of tag which is the stop position of the scroll.

Sample

html 
<body id="top">

...

<a href="#top" id="backtothetop-fixed">Back to the Top</a>

Anchor link in the page

  1. Add a #** in the href attribute of the anchor link. The attribute value is to your liking.
  2. Add a ** in an id attribute of tag which is the stop position of the scroll.

Sample

html 
<a href="#link">link</a>

...

<h1 id="link">header</h1>

5. Operation check

check whether to scroll.

Advanced Settings

You can be customized using the attribute data-*.

To the top of the page

  1. Add a #** in the href attribute of the anchor link. The attribute value is to your liking.
  2. Add a backtothetop-fixed in the id attribute of the anchor link.
  3. Add data-* attributes in the the anchor link, referring to the available options.

Sample

html 
<a href="#top" id="backtothetop-fixed"
 data-backtothetop-duration="600"
 data-backtothetop-easing="easeOutQuart"
 data-backtothetop-offset="100"
 data-backtothetop-fixed-scroll-offset="500"
 data-backtothetop-fixed-fadeIn="1000"
 data-backtothetop-fixed-fadeOut="1000"
 data-backtothetop-fixed-display="bottom-right"
 data-backtothetop-fixed-bottom="10"
 data-backtothetop-fixed-right="10"
>Back to the Top</a>

Anchor link in the page

  1. Add a #** in the href attribute of the anchor link. The attribute value is to your liking.
  2. Add data-* attributes in the the anchor link, referring to the available options.

Sample

html 
<a href="#top"
 data-backtothetop-duration="600"
 data-backtothetop-easing="easeOutQuart"
 data-backtothetop-offset="100"
>link</a>

Options

The available options are common data-backtothetop-* attributes and data-backtothetop-fixed-* attributes of a link to the top of the page.

data-* Attribute Data Type Default Value Description
data-backtothetop-scrolltop Numeric (px) undefined The stop position of the scroll by px specified
it takes precedence than specified in the id attribute
data-backtothetop-duration Numeric (Millisecond) 300 Operation period of the animation
data-backtothetop-easing Name of the easing equation swing Effects easing
data-backtothetop-offset Numeric (+-px) 0 Offset from the reference point of the stop position
data-backtothetop-hash Boolean true add history to browser
data-backtothetop-fixed-scroll-offset Numeric (px) 0 Scroll position to display a link to the top of the page
data-backtothetop-fixed-fadeIn Predefined values (slow | normal | fast) or Numeric (Millisecond) slow Speed ​​of the fade-in
data-backtothetop-fixed-fadeOut Predefined values (slow | normal | fast) or Numeric (Millisecond) slow Speed ​​of the fade-out
data-backtothetop-fixed-display Predefined values (bottom-right | bottom-left | top-right | top-left) bottom-right Display position of the link
data-backtothetop-fixed-top Numeric (px) 0 Margin of link display
data-backtothetop-fixed-bottom Numeric (px) 0 Margin of link display
data-backtothetop-fixed-left Numeric (px) 0 Margin of link display
data-backtothetop-fixed-right Numeric (px) 0 Margin of link display
data-backtothetop-fixed-zindex Numeric 999 the vertical stacking order of elements

Required

Download

Download latest version

Repository

Small patches and bug reports can be submitted a issue tracker in Github. Forking on Github is another good way. You can send a pull request.

Changelog

License

Dual licensed under the MIT and GNU General Public License v2.0 (GPLv2) licenses.

Copyright (c) 2012-2016 by thingsym

The MIT License (MIT)

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

https://www.opensource.org/licenses/mit-license.php

GNU General Public License v2.0 (GPLv2)

https://www.gnu.org/licenses/gpl.html

Back to the Top