javascript - 手機端怎么實現返回頂部效果呢?(手機端滾動條會隱藏,無法檢測)我用的sui 框架 a的錨點功能不能用,有沒有js方法?
問題描述
如題,因為用了sui框架,a的錨點鏈接效果沒作用,雖然我禁用了路由功能,還是不行 請問有沒有js方法實現返回頂部?或者哪位大神熟悉sui框架 我該怎么實現呢?
問題解答
回答1://當滾動條的位置處于距頂部100像素以下時,跳轉鏈接出現,否則消失 $(function () {$(window).scroll(function () { if ($(window).scrollTop() > 100) {$('#back-to-top').fadeIn(1000);console.log($(window).scrollTop())console.log(window.innerHeight) } else {$('#back-to-top').fadeOut(1000); }});//當點擊跳轉鏈接后,回到頁面頂部位置$('#back-to-top').click(function () { $(’body,html’).animate({scrollTop: 0}, 1000); return false;}); });
我寫了小demo 明明就可以觸發
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Title</title> <meta name='viewport' content='width=device-width,user-scalable=no,initial-scale=1.0'/> <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'/> <meta name='keywords' content=''/> <meta name='description' content=''/> <meta name='robots' content='all'> <meta name='renderer' content='webkit'> <style>*{ margin: 0;padding: 0;} p{ width: 100%; height:1880px; background: #BDBDBD; }.fix{ width: 50px; height:50px; background: #B72712; position: fixed; right: 0; bottom: 50px; color: #ffffff; font-size: 18px; text-align: center; display: none;} </style></head><body><p id='p'> 我是主體內容</p><p id='back-to-top'> 返回頂部</p></body><script src='http://www.cgvv.com.cn/wenda/jquery.js'></script><script>$(function () { $(window).scroll(function () {if ($(window).scrollTop() > 100) { $('#back-to-top').fadeIn(1000); console.log($(window).scrollTop()) console.log(window.innerHeight)}else { $('#back-to-top').fadeOut(1000);} }); //當點擊跳轉鏈接后,回到頁面頂部位置 $('#back-to-top').click(function () {$(’body,html’).animate({scrollTop: 0}, 1000);return false; });});</script></html>
