猿问

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

手机端怎么实现返回顶部效果呢？我用的sui 框架 a的锚点功能不能用，有没有js方法？

如题，因为用了sui框架，a的锚点链接效果没作用，虽然我禁用了路由功能，还是不行 请问有没有js方法实现返回顶部?或者哪位大神熟悉sui框架 我该怎么实现呢？

慕姐8265434
浏览 1026回答 1
1回答

汪汪一只猫

&nbsp; &nbsp; //当滚动条的位置处于距顶部100像素以下时，跳转链接出现，否则消失&nbsp; &nbsp; $(function () {&nbsp; &nbsp; &nbsp; &nbsp; $(window).scroll(function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if ($(window).scrollTop() > 100) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $("#back-to-top").fadeIn(1000);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log($(window).scrollTop())&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(window.innerHeight)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $("#back-to-top").fadeOut(1000);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; //当点击跳转链接后，回到页面顶部位置&nbsp; &nbsp; &nbsp; &nbsp; $("#back-to-top").click(function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('body,html').animate({scrollTop: 0}, 1000);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return false;&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; });我写了小demo 明明就可以触发<!DOCTYPE html><html><head>&nbsp; &nbsp; <meta charset="UTF-8">&nbsp; &nbsp; <title>Title</title>&nbsp; &nbsp; <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0"/>&nbsp; &nbsp; <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>&nbsp; &nbsp; <meta name="keywords" content=""/>&nbsp; &nbsp; <meta name="description" content=""/>&nbsp; &nbsp; <meta name="robots" content="all">&nbsp; &nbsp; <meta name="renderer" content="webkit">&nbsp; &nbsp; <style>&nbsp; &nbsp; &nbsp; &nbsp; *{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin: 0;padding: 0;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; div{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 100%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height:1880px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background: #BDBDBD;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .fix{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 50px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height:50px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background: #B72712;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: fixed;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; right: 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; bottom: 50px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color: #ffffff;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font-size: 18px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text-align: center;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: none;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; </style></head><body><div id="div">&nbsp;我是主体内容</div><div class="fix" id="back-to-top">&nbsp; 返回顶部</div></body><script src="jquery.js"></script><script>$(function () {&nbsp; &nbsp; $(window).scroll(function () {&nbsp; &nbsp; &nbsp; &nbsp; if ($(window).scrollTop() > 100) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $("#back-to-top").fadeIn(1000);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log($(window).scrollTop())&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(window.innerHeight)&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $("#back-to-top").fadeOut(1000);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });&nbsp; &nbsp; //当点击跳转链接后，回到页面顶部位置&nbsp; &nbsp; $("#back-to-top").click(function () {&nbsp; &nbsp; &nbsp; &nbsp; $('body,html').animate({scrollTop: 0}, 1000);&nbsp; &nbsp; &nbsp; &nbsp; return false;&nbsp; &nbsp; });});</script></html>
0
打开App，查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript