在浏览长网页比如twitter、facebook时,为了返回页面顶部,常常需要拖动浏览器的滚动条,实在不方便。于是我给自己的chrome写了这样一个扩展,能够快速地返回页面顶部。
效果如下图所示:
有关chrome扩展的入门教程,请参阅http://code.google.com/chrome/extensions/getstarted.html。
先来介绍一下这款扩展的思路:在页面右下角插入一个返回页面顶部的图标,点击该图标,便滚动页面。当然,也支持快捷键操作。
下面先来看一下该扩展的目录结构。
top.js用于在网页中插入一个图标,该脚本只在顶层被注入,以免网页的每一个frame中都会生成一个图标。代码如下:
function initIcon(addIcon){
ext_btt_addIcon=addIcon;
changeUi();
}
function changeUi(){
var a=document.getElementById('ext_btt');
if(a!=null)
a.parentNode.removeChild(a);
if(ext_btt_addIcon){
var a=document.createElement('a');
a.id='ext_btt';
a.style.zIndex=19881211;
a.href='#';
var img=document.createElement('img');
var imgURL = chrome.extension.getURL('images/icon.png');
img.src=imgURL;
img.width=32;
img.height=32;
img.style.border='none';
a.appendChild(img);
a.onclick=function(){
chrome.extension.sendRequest({});
return false;
};
document.body.appendChild(a);
}
}
frame.js用于在网页的每一个frame中添加滚动的代码,该脚本必须注入到每一个frame中。比如在gmail中,收件箱的主体部分其实是一个子frame,如果不注入每一个frame,则无法实现回到顶部的效果。代码如下:
document.onkeydown=function(){
if(!ext_btt_hotkeys) return;
var a=window.event.keyCode;
if((a==38)&&(event.altKey)) {
chrome.extension.sendRequest({});
}
};
function initHotkeys(hotkeys){
ext_btt_hotkeys=hotkeys;
}
function goTop(animation, acceleration, time) {
if(!animation){
window.scrollTo(0, 0);
return;
}
acceleration = acceleration || 0.3;
time = time || 20;
var x1 = 0;
var y1 = 0;
var x2 = 0;
var y2 = 0;
var x3 = 0;
var y3 = 0;
if (document.documentElement) {
x1 = document.documentElement.scrollLeft || 0;
y1 = document.documentElement.scrollTop || 0;
}
if (document.body) {
x2 = document.body.scrollLeft || 0;
y2 = document.body.scrollTop || 0;
}
var x3 = window.scrollX || 0;
var y3 = window.scrollY || 0;
var x = Math.max(x1, Math.max(x2, x3));
var y = Math.max(y1, Math.max(y2, y3));
var speed = 1 + acceleration;
window.scrollTo(Math.floor(x / speed), Math.floor(y / speed));
if(x > 0 || y > 0) {
var invokeFunction = "goTop('" + animation + "', " + acceleration + ", " + time + ")";
window.setTimeout(invokeFunction, time);
}
}
style.css用于设定插入网页的图标的样式。
下面让我们来看一看background.html。
这个文件好比一个应用程序的main函数。代码如下:
<script>
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(null, {code: "goTop(" + string2Bool(localStorage.animation) + ");", allFrames: true});
});
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
initialize(tabId);
});
chrome.tabs.onSelectionChanged.addListener(function(tabId, selectInfo) {
initialize(tabId);
});
chrome.extension.onRequest.addListener(
function() {
chrome.tabs.executeScript(null, {code: "goTop(" + string2Bool(localStorage.animation) + ");", allFrames: true});
});
function initialize(tabId){
chrome.tabs.executeScript(tabId, {file: "top.js"});
chrome.tabs.insertCSS(tabId, {file: "style.css"});
chrome.tabs.executeScript(tabId, {file: "frame.js", allFrames: true}, function(){
chrome.tabs.executeScript(tabId,
{code: "initIcon(" + string2Bool(localStorage.addIcon) + ");"});
chrome.tabs.executeScript(tabId,
{code: "initHotkeys(" + string2Bool(localStorage.hotkeys) + ");", allFrames: true});
});
}
function string2Bool(string){
return string=='false'?false:true;
}
</script>
具体的API使用方法,请查阅Tabs(用于控制标签页行为)的文档:http://code.google.com/chrome/extensions/tabs.html。
最后,再来看看options.html这个文件。该文件是扩展的选项文件。在chrome中,选项值是通过html5的localstorage来存储的。这里,我们提供了三个选项:
选项值是bool值。值得注意的是,localstorage会将bool值的true或false转换为string类型的"true"和"false"来存储,对照background.html你会发现,string2Bool这个函数提供了两者间的转换。
好的,至此,我们的back to top扩展就完成了。
如上图所示,在扩展程序的管理页中,点击按钮,选定扩展所在的目录,你就可以载入你刚刚写好的扩展,在浏览器中进行调试了。
最后,依然附上源码。
感兴趣的同学依然可以对这款扩展进行完善:比如提供更多图标样式;提供滚动速度的选项;当页面长度超过一屏时才显示返回顶部图标等等。
- 大小: 2.9 KB
- 大小: 2.4 KB
- 大小: 3.8 KB
- 大小: 30.7 KB
分享到:
相关推荐
Vue Backtotop组件 Vue.js的Back-to-top组件,单击后可将页面滚动到顶部 演示版 参见。 通过npm安装 npm install vue-backtotop --save 导入和使用 导入以供全球使用 import Vue from 'vue' import BackToTop from ...
BackToTop.vue
【练习向】jQuery基础教程第四版章节源码——Book05_jQuery_操作DOM
插件 Quick backToTop_v0.1
tink-back-to-top-angular-源码.rar
香草回到顶部 简单,微小的Back To Top按钮,没有依赖项。 在顶部时隐藏,在单击时平滑向上滚动。 同样适用于 , , 以及在 , 和上没有框架的产品特点顶部隐藏单击时平滑向上滚动最新的类似的用户体验与兼容没有...
NULL 博文链接:https://newlinuxjava.iteye.com/blog/1779419
js+css实现回到顶部按钮(back to top).docx
iOS实例开发源码——glimberg-mac-n-back-67aa148.zip
Angular-vanilla-back-to-top.zip,简单流畅的背对背扣,Angularjs于2016年发布,是Angularjs的重写版。它专注于良好的移动开发、模块化和改进的依赖注入。angular的设计目的是全面解决开发人员的web应用程序工作流。
back to top button, js and html
S32K144-PDB-ADC_backtoback-DMA-ISR-S32DS_s32k144pdb定时器ADCDMA_s32k144+ADC+PDB_s32kadc_s32k144adcdma_源码.zip
Building Java Programs A Back to Basics Approach 第二版
This is modeling back to back converter
<p id=back-to-top><a><span></span></a> css p#back-to-top{ position:fixed; bottom:100px; right:80px; } p#back-to-top a{ text-align:center; text-decoration:none; color:#d1d1d1; display:block; ...
这是一个可以快速回到页面顶部的组件,当用户浏览到页面底部的时候,通过点击按钮,可快速回到页面顶部。 应用方法详见博文:https://shq5785.blog.csdn.net/article/details/102917007
这是我改过的回到顶部组件,大家可以参考一下,功能相似,不符合要求可以改动一下,原理都是一样的
自己就在研究怎么用VUE实现一个组件的封装,今日就算留个笔记 前言 返回顶部这个功能用jq实现,好容易实现,一个animate配合scrollTo就搞定了 今天我们来试试vue封装一个原生js实现的返回顶部; 写起来够呛,借助...
石油石化企业国际竞争力比较研究——基于Back Propagation神经网络的实证分析.pdf