添加返回顶部按钮gototop
转载自: 大发博客效果之返回顶部 (404)
jQuery(<script src="//cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>)
首先确保您的主题开启了 jQuery, 然后把下面的代码加入到你的主题的 js 文件里
var bigfa_scroll = {
drawCircle: function(id, percentage, color) {
var width = jQuery(id).width();
var height = jQuery(id).height();
var radius = parseInt(width / 2.20);
var position = width;
var positionBy2 = position / 2;
var bg = jQuery(id)[0];
id = id.split("#");
var ctx = bg.getContext("2d");
var imd = null;
var circ = Math.PI * 2;
var quart = Math.PI / 2;
ctx.clearRect(0, 0, width, height);
ctx.beginPath();
ctx.strokeStyle = color;
ctx.lineCap = "square";
ctx.closePath();
ctx.fill();
ctx.lineWidth = 3;
imd = ctx.getImageData(0, 0, position, position);
var draw = function(current, ctxPass) {
ctxPass.putImageData(imd, 0, 0);
ctxPass.beginPath();
ctxPass.arc(positionBy2, positionBy2, radius, -(quart), ((circ) * current) - quart, false);
ctxPass.stroke();
}
draw(percentage / 100, ctx);
},
backToTop: function($this) {
$this.click(function() {
jQuery("body,html").animate({
scrollTop: 0
},
800);
return false;
});
},
scrollHook: function($this, color) {
color = color ? color: "#000000";
$this.scroll(function() {
var docHeight = (jQuery(document).height() - jQuery(window).height()),
$windowObj = $this,
$per = jQuery(".per"),
percentage = 0;
defaultScroll = $windowObj.scrollTop();
percentage = parseInt((defaultScroll / docHeight) * 100);
var backToTop = jQuery("#backtoTop");
if (backToTop.length > 0) {
if ($windowObj.scrollTop() > 100) {
backToTop.addClass("button--show");
} else {
backToTop.removeClass("button--show");
}
$per.attr("data-percent", percentage);
bigfa_scroll.drawCircle("#backtoTopCanvas", percentage, color);
}
});
}
}
jQuery(document).ready(function() {
jQuery("body").append('<div id="backtoTop" data-action="gototop"><canvas id="backtoTopCanvas" width="48" height="48"></canvas><div class="per"></div></div>');
var T = bigfa_scroll;
T.backToTop(jQuery("#backtoTop"));
T.scrollHook(jQuery(window), "#FF5E52");
});
CSS
body{font-family: "Microsoft Yahei","Helvetica Neue",Helvetica,Arial,sans-serif;}
#backtoTop{background-color:#eee;border-radius:100%;bottom:10%;height:48px;position:fixed;right:-100px;width:48px;transition:0.5s;-webkit-transition:0.5s}
#backtoTop.button--show{right:10px}
.per{font-size:16px;height:48px;line-height:48px;position:absolute;text-align:center;top:0;width:48px;color:#555;cursor:pointer}
.per:before{content:attr(data-percent)}
/*.per:hover:before{content:"↑";font-size:20px}*/
.per:hover::before {content: "▲";font-size: 22px;line-height: 0;}
修改参数
圆环的颜色怎么修改? 修改
T.scrollHook(jQuery(window), "#cc0000");
里的 #cc0000 至对应的颜色代码.
还可以修改 hover 时的图标, 修改如下代码中的 ↑ 即可.
.per:hover:before{content:"↑";font-size:20px}
下载源码
1.ScrollUp是一个轻量级的 jQuery 插件，轻松实现了滚动页面的 “返回顶部” 的功能。
在线演示：demo1 demo2
Jquery plugin ScrollUp使用和实现介绍
<script src="//cdn.bootcss.com/jquery/2.2.0/jquery.min.js"></script>
<script src="//cdn.bootcss.com/scrollup/2.4.0/jquery.scrollUp.min.js"></script>
<script src="<?php $this->options->themeUrl('js/jquery.scrollUp.min.js'); ?>"></script>
<link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="//cdn.bootcss.com/bootstrap-material-design/0.3.0/css/material.min.css" rel="stylesheet">
2.jQuery.toTop是一款轻量级的 jQuery 返回顶部插件，压缩后不到 1KB。同时它也是可定制的，你可以设置是否自动隐藏、滚动时间、位置等等。demo
3.Elevator.js通过在返回时添加音乐，使网页在返回顶部过程中犹如电梯向上运行，到达顶部后，有“到达”的提示音。
摘要说明：
Elevator.js是一个独立的轻量级JS插件，无需JQuery等支持，所以使用起来是非常简单的，只需引入Elevator.js一个文件即可，元素的所有样式均可自行定义。此插件只针对于音频和滚动功能。 demo1或者demo2
4.typecho增加上下滑动
教程开始
4.1，新建一个名叫slide.js的文件，内容是
jQuery(document).ready(function($){
var s= $('#shangxia').offset().top;$(window).scroll(function (){$("#shangxia").animate({top : $(window).scrollTop() + s + "px" },{queue:false,duration:500});});
$body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html') : $('body')) : $('html,body');
$('#shang').click(function(){$body.animate({scrollTop: '0px'}, 400);});
$('#comt').click(function(){$body.animate({scrollTop:$('#comments').offset().top}, 800);});
$('#xia').click(function(){$body.animate({scrollTop:$('#footer').offset().top}, 800);});
});
把slide.js上传至/usr/plugin/你主题文件夹/js文件夹下面。 注意，在你的模板中有footer,comments这几个id，要不起不了作用。
4.2.把图片传到/usr/plugin/你主题文件夹/img下面，
有的可能是images，一样，就是下面改下css, 图片就是这个
注意，图片名叫slide.png
4.3.修改style.css
在最下面添加这几行
/** shangxia */
#shangxia { display: block; position: absolute; top: 79%; right: 4%; }
#shang, #comt, #xia{ position: relative; width: 29px; height: 25px; margin: 10px 0 0; background: url(img/slide.png) no-repeat; cursor: pointer; }
#comt { height: 32px; background-position: center -30px; }
#xia { background-position: center -68px; } 如果图片文件夹是images的话，
#shang, #comt, #xia{ position: relative; width: 29px; height: 25px; margin: 10px 0 0; background: url(img/slide.png) no-repeat; cursor: pointer; }
把红色的字改成images/slide.png就好了。
4.4.修改footer.php
在前面添加这几刚代码
<div id="shangxia"><div id="shang"></div><div id="comt"></div><div id="xia"></div></div>
<script type="text/javascript" src="<?php $this->options->themeUrl('js/slide.js'); ?>"></script>
<?php $this->footer(); ?>
修改完成。
5.为WordPress添加返回顶部按钮
CSS
/*返回顶部样式*/
#gotop{
width:54px;
height:54px;
position:fixed;
bottom:60px;
right:30px;
top:auto;
display:block;
cursor:pointer;
background: url(/images/to-top.png) no-repeat
}
*html #gotop{
position:absolute;
bottom:auto;
}
在footer添加
<!-- 返回顶部 -->
<div style="display: none;" id="gotop"></div>
<script type='text/javascript'>
backTop=function (btnId){
var btn=document.getElementById(btnId);
var d=document.documentElement;
var b=document.body;
window.onscroll=set;
btn.onclick=function (){
btn.style.display="none";
window.onscroll=null;
this.timer=setInterval(function(){
d.scrollTop-=Math.ceil((d.scrollTop+b.scrollTop)*0.1);
b.scrollTop-=Math.ceil((d.scrollTop+b.scrollTop)*0.1);
if((d.scrollTop+b.scrollTop)==0) clearInterval(btn.timer,window.onscroll=set);
},10);
};
function set(){btn.style.display=(d.scrollTop+b.scrollTop>100)?'block':"none"}
};
backTop('gotop');
</script>
<!--end 返回顶部 -->
jQuery.toTop使用方法
1、引入文件
<script src="jsjquery.min.js"></script> <script src="js/jquery.toTop.min.js"></script>
2、HTML
<a class="to-top">返回顶部</a>
3、JavaScript
$('.to-top').toTop();配置
| 属性/方法 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| autohide | 布尔值 | true | 自动隐藏 |
| offset | 整数 | 420 | 距离顶部多少距离时自动隐藏按钮 |
| speed | 整数 | 500 | 滚动持续时间 |
| position | 布尔值 | true | 如果设置为 false，则需要手动在 css 中设置“按钮”的位置 |
| right | 整数 | 15 | 右侧距离 |
| bottom | 整数 | 30 | 底部距离 |
A
一、首先将下面的代码添加到主题目录的style.css样式表中，当然也可以根据自己的风格进行修改：
/*返回顶部样式*/
#gotop{
width:38px;
height:36px;
position:fixed;
bottom:25px;
right:10px;
top:auto;
display:block;
cursor:pointer;
background: url(myimages/top.gif) no-repeat
}
*html #gotop{
position:absolute;
bottom:auto; top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
}
/*返回顶部样式结束*/
二、将下面的代码添加到主题目录的footer.php中进行调用：
<!-- 返回顶部 -->
<div style="display: none;" id="gotop"></div>
<script type='text/javascript'>
backTop=function (btnId){
var btn=document.getElementById(btnId);
var d=document.documentElement;
var b=document.body;
window.onscroll=set;
btn.onclick=function (){
btn.style.display="none";
window.onscroll=null;
this.timer=setInterval(function(){
d.scrollTop-=Math.ceil((d.scrollTop+b.scrollTop)*0.1);
b.scrollTop-=Math.ceil((d.scrollTop+b.scrollTop)*0.1);
if((d.scrollTop+b.scrollTop)==0) clearInterval(btn.timer,window.onscroll=set);
},10);
};
function set(){btn.style.display=(d.scrollTop+b.scrollTop>100)?'block':"none"}
};
backTop('gotop');
</script>
<!-- 返回顶部END -->
三、将下面的图片放在主题目录的myimages文件夹下，并且图片的名字为top.gif，也可以在步骤1的第11行代码修改路径和名字。
B:
在footer部分添加：
<script type="text/javascript">
$(function(){
$('#ad-carousel').carousel();
$('#menu-nav.navbar-collapse a').click(funtion(e){
var href=$(this).attr('href');
var tabId=$(this).attr('data-tab');
if ('#'!==href) {
e.preventDefault();
$(document).scrollTop($(href).offset().top-70);
if (tabId) {
$('#feature-tab a[href=#'+tabId+']').tab('show');
};
};
})
})
</script>
在具体的地方引用
<a href="#"><font color="white">gototop</font></a>
C
https://ciyuanai.net/archives/23.html
D
<!DOCTYPE html>
<html>
<head>
<script>
function scrollWindow()
{
window.scrollTo(0, 0);
}
</script>
</head>
<body>
<p>SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL</p>
<br>
<br>
<br>
<br>
<br>
<input type="button" onclick="scrollWindow()" value="Scroll" />
<br>
<br>
<br>
</body>
</html>
http://stackoverflow.com/questions/1144805/how-do-i-scroll-to-the-top-of-the-page-with-jquery
http://www.w3cplus.com/jquery/scrolling-to-the-top-with-jquery
标签：返回顶部