#微信小程序实现回到顶部的悬浮按钮#

news/2024/9/15 21:29:21/

wxml:

  <view class="btn" bindtap="gotop"><text class="btn-gotop" style="">顶部</text></view>

js:

gotop:function(e){if (wx.pageScrollTo) {wx.pageScrollTo({scrollTop: 0})} else {wx.showModal({title: '提示',content: '当前微信版本过低,无法使用该功能,请升级到最新微信版本后重试。'})}}

wxss:

.btn{
background-color: #808080;
border: black;
margin-left:80%;
width:48px; 
height: 48px;
position:fixed; 
bottom:20px; 
border-radius: 50%
}
.btn-gotop 
{ 
color:white; 
position:absolute;
margin-top: 0.8rem;
margin-left: 0.4rem
} 

样式文件注意一点:使用px、%单位调整文字位置的时候都没有生效,使用rem就生效了。

最终效果:
在这里插入图片描述
转载:https://blog.csdn.net/qq_45128278/article/details/106138917


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

相关文章

php模板批量输出多个txt文件,zblogPHP模板中指定调用多个分类的最新文章

调用指定分类文章最新文章应该是zblog模板制作中常常遇到的&#xff0c;需要后台主题配置内可控制。 在昨天的仿的zblog模板中需要用到指定多个分类&#xff0c;显示其最新文章。 要求显示样式为&#xff1a; 分类一 文章 文章 文章 分类二 文章 文章 文章 这样的显示方式和ded…

小程序一键回到顶部

我用的是图片 wxml <image src........... classgoTop hidden{{!floorstatus}} bindtap"goTop"></imagecss .goTop{height: 80rpx;width: 80rpx;position: fixed;bottom: 132rpx;right: 30rpx;border-radius: 50%; }js goTop: function (e) { // 一键回…

移动端 回到顶部按钮特效

html部分 <div class="gotop"></div> .gotop{position: fixed;width: 1rem;height: 1rem;z-index: 200;right: .3rem;bottom: 1.5rem;overflow: hidden;}脚本部分 // 回到顶部$(.gotop).click(function(){var dealTop = $("body").offset().t…

vue 封装返回顶部组件

我的环境是vuevantts, 相信大家应该知道怎么改成vuejs的写法 先看效果图&#xff1a; HTML: <template><!-- 返回顶部组件 2020-02-17 Walker --><div class"backtop"><div v-if"btnFlag" click"backTop" class"my_…

回到顶部php,css实现快速回到顶部效果

背景&#xff1a; 现在的网站基本上都是长页面&#xff0c;多的有四五屏&#xff0c;少的话也有两三屏&#xff0c;页面太长有的时候为了提升用户体验&#xff0c;会在页面右边出现一个回到顶部的按钮&#xff0c;这样能快速回到顶部&#xff0c;以免在滑动页面出现视觉屏幕&am…

前端学习(二十)

前端学习&#xff08;二十&#xff09; 模仿抖音刷视频 <!DOCTYPE html> <html> <head><meta charset"utf-8"><meta name"viewport" content"initial-scale1.0, maximum-scale1.0, user-scalableno" /><titl…

网页回到顶部 GoTop 按钮自动隐藏

一直没有添加 GoTop 回到顶部自动隐藏的 JS&#xff0c;只是简单固定在一个位置&#xff0c;有时候会挡住部分视线&#xff0c;尽管我的右下角几乎是没有可挡的内容。 今天趁着有空折腾&#xff0c;这里记录一下使用过程。 完整代码如下&#xff1a; <div style"displa…

js控制的回到顶端goTop的使用

有没有见过很多在页面的右下角有个【回到顶端】的悬浮东东&#xff0c;并且在开始时没有&#xff0c;一移动滚动条就出现&#xff0c;回到了顶端又消失的样子。 像: 控制的js代码如下&#xff1a; function goTop(){ var _btn document.getElementById("goTop"); i…

GoTop给网站加一个悬挂猫效果上吊猫

简介&#xff1a; GoTop给网站加一个悬挂猫效果上吊猫是一个超级可爱的文章小插件&#xff0c;其主要功能就是帮助用户在浏览的网站界面添加一个点击小猫之后回到网页顶部的效果&#xff0c;具体样式可以参考下文图示&#xff0c;相信不少朋友们都会喜欢&#xff0c;真的很可爱…

Windows 11 22H2 中文版、英文版 (x64、ARM64) 下载 (updated Jun 2023)

Windows 11 22H2 中文版、英文版 (x64、ARM64) 下载 (updated Jun 2023) Windows 11, version 22H2 官方原版&#xff0c;2023 年 6 月 更新 请访问原文链接&#xff1a;https://sysin.org/blog/windows-11/&#xff0c;查看最新版。原创作品&#xff0c;转载请保留出处。 作…

随滚动条变动的圆环滚动进度条,goTop按钮整合案例

效果展示&#xff1a; html和js部分&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport&qu…

jquery gotop插件

一个简单返回顶端的jquery插件 Js代码&#xff1a; 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 …

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…