<!DOCTYPE html>
<title>Title</title>
<style>body {width: 500px;}</style>
<script type="application/javascript">
function $init() {return true;}
</script>
<body>
<p checked class="title" id='title'>Title</p>
<!-- here goes the rest of the page -->
</body>
Percobaan
Showup
Letakkan di atas </head>
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://getbootstrap.com/docs-assets/css/docs.css" rel="stylesheet"/>
<link href="https://sites.google.com/site/jqueryfold/css/showup.css" rel="stylesheet"/>
Letakkan di atas </body>
<a href="#" class="btn back-to-top btn-light btn-fixed-bottom"> <span class="glyphicon glyphicon-chevron-up"></span> </a>
<a href="#" style="right: 70px;" class="btn back-to-top btn-dark btn-fixed-bottom"> <span class="glyphicon glyphicon-chevron-up"></span> </a>
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="https://sites.google.com/site/jqueryfold/js/showup.js"></script>
<!-- Showup Plugin -->
<script>
$().showUp('.navbar', {
upClass: 'navbar-show',
downClass: 'navbar-hide'
});
</script>
Save
Floating Scroll To Top
Letakkan di atas </b:skin>
#elevator_item {
width: 60px;
height: 100px;
position: fixed;
right: 15px;
bottom: 10px;
-webkit-transition: opacity .4s ease-in-out;
-moz-transition: opacity .4s ease-in-out;
-o-transition: opacity .4s ease-in-out;
opacity: 1;
z-index: 100020;
display: none;
}
#elevator_item.off {
opacity: 0;
visibility: hidden
}
#elevator {
display: block;
width: 60px;
height: 50px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJj2TmhSFWAJEbWl3_vdtPk6SKGrMwA9RsX50Gr0Gj8ZZb6nFn1dySEE_FTwDR2WXm22G98YRONLowf44L18T5X3gC06_7AKQ_xLTR5syg4ejGYmDHHgHkG-xtVEJH9P0_N3pO1ah8hsU/s1600/icon_top.png) center center no-repeat;
background-color: #444;
background-color: rgba(0,0,0,.6);
border-radius: 2px;
box-shadow: 0 1px 3px rgba(0,0,0,.2);
cursor: pointer;
margin-bottom: 10px
}
#elevator:hover {
background-color: rgba(0,0,0,.7)
}
#elevator:active {
background-color: rgba(0,0,0,.75)
}
#elevator_item .qr {
display: block;
width: 60px;
height: 40px;
border-radius: 2px;
box-shadow: 0 1px 3px rgba(0,0,0,.2);
cursor: pointer;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhtXcchWOzKrwLAWJEtJxO_V4UwR8UtJxwI2zmxcj-c9-ESxEz-t_iJ3z2sVEezmXzehe0jjrz6Whg14u5hadqF96i_sB9h1_YBLyyoRsaTfk7_uKfE1nBwPh9envrCcdWp1sQdxxWXjU/s1600/icon_code.png) center center no-repeat;
background-color: #444;
background-color: rgba(0,0,0,.6)
}
#elevator_item .qr:hover {
background-color: rgba(0,0,0,.7)
}
#elevator_item .qr:active {
background-color: rgba(0,0,0,.75)
}
#elevator_item .qr-popup {
width: 170px;
height: 200px;
background: #fff;
box-shadow: 0 1px 8px rgba(0,0,0,.1);
position: absolute;
left: -180px;
bottom: 0;
border-radius: 2px;
display: none;
text-align: center
}
#elevator_item .qr-popup .code-link {
display: block;
margin: 10px;
color: #777
}
#elevator_item .qr-popup .code {
display: block;
margin-bottom: 10px
}
#elevator_item .qr-popup .arr {
width: 6px;
height: 11px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSnWsim1ojkSLxuJJkf60Gx291m1QoWgXy0T-GgxHbNkSqC-F84EL1M9BOcprqHJK6MxpLYezKNnfMuovrieDl4uJQCLqUuuxZb3DcI8cEGr5M9uGdJAORT7Y3twmsEEgAx4RC9R7pR1A/s1600/code_arrow.png) 0 0 no-repeat;
position: absolute;
right: -6px;
bottom: 14px
}
Letakkan di atas </body>
<div id="elevator_item">
<a href="#" id="elevator" onclick="return false;" title="Back To Top"></a>
<a class="qr" href="/"></a>
<div class="qr-popup">
<a class="code-link" href="/"> <img class="code" src="http://chart.apis.google.com/chart?chs=150x150&cht=qr&&chl=http://jquery-my.blogspot.com" /> </a> <span>jQueryScript</span>
<div class="arr">
</div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://sites.google.com/site/jqueryfold/js/app%20jQuery-Scroll-To-Top-Barcode-Plugin.js" type="text/javascript"></script>
Save
Beautiful Back To Top Button
Letakkan di atas </head>
<link href="https://sites.google.com/site/jqueryfold/css/backtotop%20BackToTop-master.css" rel="stylesheet" type="text/css"/>
Letakkan di atas </body>
<script src="https://sites.google.com/site/jqueryfold/js/jquery%20BackToTop-master.js" type="text/javascript"></script>
<script src="https://sites.google.com/site/jqueryfold/js/jquery-ui%20BackToTop-master.js" type="text/javascript"></script>
<script src="https://sites.google.com/site/jqueryfold/js/BackToTop.jquery%20BackToTop-master.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
BackToTop({
text : '^ Back to top',
autoShow : true,
autoShowOffset: 300,
timeEffect : 800,
appearMethod : 'fade',
effectScroll : 'easeOutCubic', /** all effects http://jqueryui.com/docs/effect/#easing */
opacity : 1,
top: 50
});
});
</script>
Back to top tidak merespon karna saya demokan di postingan
Save
ScrollUp
Letakkan di atas </head>
<link href="https://sites.google.com/site/jqueryfold/css/link%20scrollup-master.css" id="scrollUpTheme" rel="stylesheet"/>
<link href="https://sites.google.com/site/jqueryfold/css/labs%20scrollup-master.css" id="scrollUpTheme" rel="stylesheet"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://sites.google.com/site/jqueryfold/js/jquery.easing.min%20scrollup-master.js"></script>
<script src="https://sites.google.com/site/jqueryfold/js/jquery.scrollUp%20scrollup-master.js" type="text/javascript"></script>
Letakkan di atas <body>
<script>
/* scrollUp Minimum setup */
// $(function () {
// $.scrollUp();
// });
// scrollUp full options
$(function () {
$.scrollUp({
scrollName: 'scrollUp', // Element ID
scrollDistance: 300, // Distance from top/bottom before showing element (px)
scrollFrom: 'top', // 'top' or 'bottom'
scrollSpeed: 300, // Speed back to top (ms)
easingType: 'linear', // Scroll to top easing (see http://easings.net/)
animation: 'fade', // Fade, slide, none
animationSpeed: 200, // Animation in speed (ms)
scrollTrigger: false, // Set a custom triggering element. Can be an HTML string or jQuery object
//scrollTarget: false, // Set a custom target element for scrolling to the top
scrollText: 'Scroll to top', // Text for element, can contain HTML
scrollTitle: false, // Set a custom <a> title if required.
scrollImg: false, // Set true to use image
activeOverlay: false, // Set CSS color to display scrollUp active point, e.g '#00FFFF'
zIndex: 2147483647 // Z-Index for the overlay
});
});
// Destroy example
$(function(){
$('.destroy').click(function(){
$.scrollUp.destroy();
})
});
</script>
Save
Simple jQuery Scroll To Top Plugin
Letakkan di atas </b:skin>
#toTop {
display: none;
position: fixed;
bottom: 5px;
right: 5px;
width: 64px;
height: 64px;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOlgR5cRT9fZ-tqSmywULxiYICDbJCV8lNUADCijDWJOXSrJ_6TGYhUHqQyapzXUb2FgtvKbLgHd8xEBVM4bpeMvbcT66QFxMEQVgFUrSPeOxSEBXRj5dh150WbNTJL-0R5qF080yjxoE/s1600/up.png');
background-repeat: no-repeat;
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
#toTop:hover {
opacity: 0.8;
filter: alpha(opacity=80); /* For IE8 and earlier */
}
Letakkan di atas </head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
(function(a){a.fn.scrollToTop=function(c){var d={speed:800};c&&a.extend(d,{speed:c});return this.each(function(){var b=a(this);a(window).scroll(function(){100<a(this).scrollTop()?b.fadeIn():b.fadeOut()});b.click(function(b){b.preventDefault();a("body, html").animate({scrollTop:0},d.speed)})})}})(jQuery);
</script>
<script type="text/javascript">
$(function() {
$("#toTop").scrollToTop(1000);
});
</script>
Letakkan di bawah <body>
<a href="#top" id="toTop"></a>
Save
iTopPage
Letakkan di atas </head>
<link href="https://sites.google.com/site/jqueryfold/css/jquery.itoppage.css" rel="stylesheet" type="text/css"/>
<script src="https://sites.google.com/site/jqueryfold/js/jquery.js" type="text/javascript"></script>
<script src="https://sites.google.com/site/jqueryfold/js/jquery.itoppage.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$().iTopPage();
});
</script>
Save
Smooth Page Scroll to Top
Letakkan di atas </b:skin>
.scrollup{
width:40px;
height:40px;
text-indent:-9999px;
opacity:0.3;
position:fixed;
bottom:50px;
right:100px;
display:none;
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHE9cKXn5Qp2vv-wQsQpBOCBn0robk9wLU-dkRoFnCbRlmMknnhfm1fa701d2W_kWX_oFuZEqJXYybXz37QXIHoUk5PV-MABpL-7PDY25iVWE6crh1uc_4uxO5yb0MnmjWiDxS89k4g4A/s1600/icon_top.png') no-repeat;
}
Letakkan di atas </head>
<script src="https://sites.google.com/site/jqueryfold/js/jquery.min.js"></script>
<link href="https://sites.google.com/site/jqueryfold/css/css" rel="stylesheet" type="text/css"/>
<link href="https://sites.google.com/site/jqueryfold/css/style.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript">
$(document).ready(function(){
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('.scrollup').fadeIn();
} else {
$('.scrollup').fadeOut();
}
});
$('.scrollup').click(function(){
$("html, body").animate({ scrollTop: 0 }, 600);
return false;
});
});
</script>
Letakkan di bawah </body>
<a class="scrollup" href="#" style="display: none;">Scroll</a>
Save
Simple Back To Top
Demo
Letakkan di atas </b:skin>
#back-to-top{
position:fixed;
bottom:100px;
left:60px;
}
#back-to-top a{
text-align:center;
text-decoration:none;
color:#d1d1d1;
display:block;
width:80px;
/*使用CSS3中的transition属性给跳转链接中的文字添加渐变效果*/
-moz-transition:color 1s;
-webkit-transition:color 1s;
-o-transition:color 1s;
}
#back-to-top a:hover{
color:#979797;
}
#back-to-top a span{
background:#d1d1d1;
border-radius:6px;
display:block;
height:80px;
width:80px;
background:#d1d1d1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQnpAf3svZlOgznSiI3TSz37DJ4Owy1tyumbBEk_UB2OP0ZAk9qzwEvnrQDU153oX-dgMsmBySkhqBnwHje0rI2i-cTgx-gupgOSdjxaakG1hColWYMS7yt3NDmUDCii4EchqBkDXOwsw/s1600/arrow-up.pn) no-repeat center center;
margin-bottom:5px;
-moz-transition:background 1s;
-webkit-transition:background 1s;
-o-transition:background 1s;
}
#back-to-top a:hover span{
background:#979797 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQnpAf3svZlOgznSiI3TSz37DJ4Owy1tyumbBEk_UB2OP0ZAk9qzwEvnrQDU153oX-dgMsmBySkhqBnwHje0rI2i-cTgx-gupgOSdjxaakG1hColWYMS7yt3NDmUDCii4EchqBkDXOwsw/s1600/arrow-up.pn) no-repeat center center;
}
Letakkan di atas </head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#back-to-top").hide();
$(function () {
$(window).scroll(function(){
if ($(window).scrollTop()>100){
$("#back-to-top").fadeIn(1500);
}
else
{
$("#back-to-top").fadeOut(1500);
}
});
//back to top
$("#back-to-top").click(function(){
$('body,html').animate({scrollTop:0},1000);
return false;
});
});
});
</script>
Letakkan di bawah <body>
<div id="back-to-top">
<a href="#top"><span></span>Back To Top</a></div>
Save
Postingan
