A "Go Top" feature plugin for Textpattern front-end webites
This simple plugin allows you to add a "Go Top" button into your Textpattern websites. An handcrafted code in vanilla javascript without any dependencies and these different features:
- Choose to display the button on page load or choose to hide it;
- Visual "fade in" and "fade out" animations on the user's scrolling event througout the page;
- Choose to restablish the button appearence when a distance is reached: from the top of the page or from the bottom of the page (in pixels);
- Rounded, minimalist and transparent SVG icon with visible borders only; fallback as a simple labeled link for old browsers.
Tested successfully within these different browsers into the Four Point Seven default theme (minimal support):
- Firefox 1.0.8 (and all other versions)
- Google Chromium 1 (and all other versions)
- Safari 5.x PC
- Opera 12 (and all other versions)
- Internet Explorer 6 (and all other versions)
- Mindori 0.3.3. (and all other versions)
- Netscape Navigator 7.1 (and all other versions)
Final weight: only 988 additional bytes into you pages.
Place this tag where you want your "Go Top" button:
<txp:pat_gotop />
Then, add an id with the top attribute into your body HTML tag:
<body id="top">
id
string (optional): the HTML unique attribute #ID of the link. Default:pat_gotop
title
string (optional): the tooltip content for the button. Default:Go Top
.label
the fallback label text for the button displayed within old browsers. Default:โโTop
show_me
boolean (optional): Display the button on page load (1
= Yes,0
= no). Default:1
(true)from_top
boolean (optional): Choose where to calculate the distance to display the button from the top of the page (after the viewport's height) or from the bottom of the page. Default:1
(true)distance
integer (optional): The distance in pixels when the button appears (from the top or from the bottom of the page, see above). Default:750
adjust
integer (optional): Adjustment in pixels that affect the scroll calculation into the page (can be a negative value). Default:100
(i.e. + 100 px)color
string (optional): The fill color (HEX code) of the SVG icon path. Default:currentColor
.debug
boolean (optional): If set to1
displays some infos into your javascript console: the distance in pixels when the script affects the visibility applied on the button (from the top or the bottom border of the visible browser's window). Useful for this plugin adjustement. Default:0
(do not display the results into your console).
Notice: keep in mind that the CSS positioning property may change the distance where the button apears into the HTML page and can be different of the scroll position detected.
The current plugin needs some CSS rules, here is a starting base of style rules for the link to add into your CSS file:
Include this link into your templates:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/cara-tm/[email protected]/css/pat_gotop.min.css">
...Or, if you want to minize the number of requests, here is the default style rules for the link to add into your CSS file:
/*! pat_gotop plugin CSS rules */
#pat_gotop {
display: block;
visibility: hidden;
overflow: visible;
position: absolute;
z-index: -1;
top: auto;
top: calc(100% - 48px);
right: 0;
bottom: auto;
left: auto;
float: right;
width: auto;
height: 3em;
/* Change the margin-top value depending of your needs:
-48px corresponds of the button's height above the bottom of the page */
margin-top: -48px;
text-decoration: none;
text-align: center;
outline: none;
font: normal normal normal 1em/1.5 'Helvetica Neue', 'HelveticaNeue', Helvetica, Arial, sans-serif;
touch-action: none;
cursor: pointer;
zoom: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=0)";
filter: alpha(opacity=0);
-khtml-opacity: 0;
-o-opacity: 0;
-moz-opacity: 0;
opacity: 0;
will-change: transform;
-webkit-transform: scale(0.5);
-ms-transform: scale(.5);
transform: scale(.5);
-webkit-animation: transform 90ms ease-in-out;
-webkit-transition-property: transform;
transition-property: opacity, transform;
-webkit-transition-duration: 90ms;
transition-duration: 90ms;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out
}
/* IE6 fixed position support: can be removed if you don't need it */
* html #pat_gotop {
position: absolute; right: 20px; bottom: 15%;
left: expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
top: expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
}
/* End IE 6 support */
/*! For modern browsers only (do not remove):
avoids ugly display within very old browsers;
the link will be set as absolute positionnng
with a pretty good fallback.
Note: checking for fixed position support
don't give exepected results within
some old Opera browsers versions */
@supports (position: sticky) {
#pat_gotop{
position: fixed;
right: 20px
}
}
html #pat_gotop.visible {
visibility: visible;
display: table-cell;
display: block;
display: inline-block;
z-index: 999999;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=100)";
filter: alpha(opacity=100);
-khtml-opacity: 1;
-o-opacity: 1;
-moz-opacity: 1;
opacity: 1;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1)
}
#pat_gotop svg path {fill: #333}
#pat_gotop,
#pat_gotop svg foreignObject {color: #333}
#pat_gotop span {vertical-align: middle}
/*! Needed for some old Webkit browsers */
html #pat_gotop.visible svg {visibility: visible}
If you want a full availability of your button, you could take advantage to add a js feature detection into the <head>
part of your page templates:
<script>
if(document.documentElement){document.documentElement.className='JS';}
</script>
Then, use these custom CSS rules instead of the previous ones:
/*! pat_gotop plugin styles */
#pat_gotop {
display: block;
overflow: visible;
position: absolute;
/* Modern browsers fallback if @supports query fails */
position: sticky;
/* End fallback */
z-index: 999999;
top: auto;
top: calc(100% - 48px);
right: 0;
bottom: auto;
left: auto;
float: right;
width: auto;
height: auto;
/* Change the margin-top value depending of your needs:
-48px corresponds of the button's height above the bottom of the page */
margin-top: -48px;
text-decoration: none;
text-align: center;
outline: none;
font: normal normal normal 1em/1.5 'Helvetica Neue', 'HelveticaNeue', Helvetica, Arial, sans-serif;
touch-action: none;
cursor: pointer;
zoom: 1;
will-change: transform;
-webkit-animation: 90ms ease-in-out;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 90ms;
transition-duration: 90ms;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out
}
.JS #pat_gotop {
z-index: -1;
visibility: hidden;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=0)";
filter: alpha(opacity=0);
-khtml-opacity: 0;
-o-opacity: 0;
-moz-opacity: 0;
opacity: 0;
-webkit-transform: scale(0.5);
-ms-transform: scale(.5);
transform: scale(.5)
}
/* IE6 fixed position support: can be removed if you don't need it */
* html #pat_gotop {
position: absolute; right: 20px; bottom: 15%;
left: expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
top: expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
}
/* End IE 6 support */
/*! For modern browsers only (do not remove):
avoids ugly display within very old browsers;
the link will be set as absolute positionnng
without any animations but with a good fallback.
Note: checking for fixed position support
don't give exepected results within
some old Opera browsers versions */
@supports (position: sticky) {
#pat_gotop{
position: fixed;
right: 20px
}
}
#pat_gotop.visible {
visibility: visible;
display: table-cell;
display: block;
display: inline-block;
z-index: 999999;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=100)";
filter: alpha(opacity=100);
-khtml-opacity: 1;
-o-opacity: 1;
-moz-opacity: 1;
opacity: 1;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1)
}
#pat_gotop svg path {fill: #333}
#pat_gotop,
#pat_gotop svg foreignObject {color: #333}
#pat_gotop span {vertical-align: middle}
/*! Needed for some old Webkit browsers */
html #pat_gotop.visible svg {visibility: visible}
- 24th May 2018: v 0.1.2 (29th May 2018: CSS simplification).
- 17th May 2018: version 0.1.1.
- 5th May 2018: version 0.1.0.