jquery gotop插件

news/2025/1/15 15:23:27/

一个简单返回顶端的jquery插件

Js代码:

View Code
(function ($) {$.fn.gotop = function (options) {var settings = $.extend({'content': 980,'bottom': 30,'margin': "none",'position': "right",'scrollTop': 100,'duration': 700}, options);var win = $(window);var top = this;//is there some place for my return to the top button?
        function hasPlace() {var place = true;if (settings.margin == "none") {if (win.width() < (settings.content + (top.width() * 2) + 4)) place = false;}else {if (win.width() < (settings.content + ((top.width() + settings.right) * 2) + 4)) place = false;}return place;}//Put our return to top button at his place
        function placeTop() {var pos = (((win.width() - settings.content) / 2) - top.width()) / 2;if (settings.position == "left" || settings.position == "l") top.css({ "left": pos + "px" });else top.css({ "right": pos + "px" });}//Can we show this button?
        function showTop() {if (win.scrollTop() > settings.scrollTop) {top.fadeIn();if ($.browser.msie && ($.browser.version == "6.0")) {var thisTop = win.scrollTop() + win.height() - top.height()- settings.bottom;top.css("top", thisTop + "px");}}else top.fadeOut();}if (!hasPlace()) this.hide();if (settings.margin == "none") placeTop();else if (settings.position == "left" || settings.position == "l") top.css({ "left": settings.margin + "px" });else top.css({ "right": settings.margin + "px" });showTop();//RESIZE
        win.resize(function () {if (hasPlace()) top.fadeIn();else top.fadeOut();if (settings.margin == "none") placeTop();});//SCROLL
        win.scroll(function () {showTop();});if ($.browser.msie && ($.browser.version == "6.0")) {top.css({ "position": "absolute", "cursor": "pointer" });} else {top.css({ "position": "fixed", "cursor": "pointer", "bottom": settings.bottom + "px" });}return top.click(function () {$('body,html').animate({ scrollTop: 0 }, settings.duration);});};
})(jQuery);

调用:

View Code
<script type="text/javascript">$(function () {$('.gotop').gotop({});});
</script>
<div class="gotop"><img title="回到顶部" src="go-top.gif" alt="Top"/></div>

转载于:https://www.cnblogs.com/lambert-li/archive/2012/04/18/2455755.html


http://www.ppmy.cn/news/601635.html

相关文章

LINUX中安装gotop检测页面

CentOS安装gotop 1.安装go语言环境 yum install golang2.安装gotop程序 git clone --depth 1 https://github.com/cjbassi/gotop /tmp/gotop/tmp/gotop/scripts/download.shcd /tmp/gotop/scripts./download.sh #会下载gotop 3.将gotop添加至环境变量目录 cp /tmp/gotop/…

linux监控工具 go实现,Gotop:另一个 TUI 图形活动监视器,使用 Go 编写

你已经知道 top 命令&#xff0c;对么&#xff1f;是的&#xff0c;它提供类 Unix 操作系统中运行中的进程的动态实时信息。一些开发人员为 top 命令构建了图形前端&#xff0c;因此用户可以在图形窗口中轻松找到他们系统的活动。其中之一是 Gotop。顾名思义&#xff0c;Gotop …

elementUI之模拟goTop组件

最近项目遇到一个问题&#xff0c;需要在个别出现较高垂直滚动条的页面&#xff0c;加入一个返回顶部的小功能。虽然利用许多Jquery插件可以实现&#xff0c;但是elementUI的官网本身就有一个goTop组件&#xff08;奈何该组件没有开放&#xff09;&#xff0c;效果还不错&#…

Js、Jquery对goTop功能的实现

本文介绍用原生JS和Jquery分别实现的网页goTopbutton功能&#xff0c;以及在这个过程中碰到的问题。 终于实现的效果类似&#xff1a;http://sc2.163.com/home&#xff08;注意右下角的top&#xff09; 代码&#xff1a; Jquery <!DOCTYPE html> <html> <head l…

linux监控工具 go实现,安装和使用gotop进行Linux系统进程监控的方法

本文介绍安装和使用gotop进行Linux系统进程监控的方法,它是Linux top命令替代方案,是一款基于终端的图形活动监视器,受gtop启发,与用Node.js编写的Gtop不同,gotop是用Golang编写的。你可以通过Linux系统下使用top命令的建议与技巧了解top。 相关链接 在Linux上安装及使用g…

CentOS安装gotop

1.安装go语言环境 yum install golang 2.安装gotop程序 git clone --depth 1 https://github.com/cjbassi/gotop /tmp/gotop /tmp/gotop/scripts/download.sh 3.将gotop添加至环境变量目录 cp /tmp/gotop/scripts/gotop /usr/local/bin 5.修改gotop权限 chmod x /usr/local/bin…

cetnos下gotop安装和使用

需要1.16及其以上进行编译首先下载安装1.17 https://golang.google.cn/dl/go1.17.5.linux-amd64.tar.gz rm -rf /usr/local/go && tar -C /usr/local -xzf go1.17.5.linux-amd64.tar.gz export PATH$PATH:/usr/local/go/bin go version git clone https://github.com/…

linux监控工具gotop

1.创建安装脚本 cd /usr/localvim gotopDownload.sh #!/usr/bin/env bash# https://gist.github.com/lukechilds/a83e1d7127b78fef38c2914c4ececc3c function get_latest_release {curl --silent "https://api.github.com/repos/$1/releases/latest" | # Get lates…