通过js实现置顶方法

最新推荐文章于 2022-10-28 15:15:44 发布
最新推荐文章于 2022-10-28 15:15:44 发布
阅读量735 收藏
点赞数
文章标签： javascript 前端 xhtml ViewUI
原文链接：http://www.cnblogs.com/taoxuexunhua/p/6194344.html
版权
  1. <!DOCTYPE html  
  2. PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
  3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  4. <html>  
  5. <head>  
  6. <script type="text/javascript">  
  7. var timer  
  8. function scrolltop()  
  9. {  
  10. document.getElementById('scrollmenu').style.top=document.documentElement.scrollTop || document.body.scrollTop || 0;  
  11. //兼容写法。页面具有DTD时，使用document.documentElement.scrollTop；没有指定DTD时使用document.body.scrollTop，所以用## || ## || 0 兼容  
  12. timer=setTimeout("scrolltop()",1) //1毫秒调用一次scrolltop()方法  
  13. }  
  14. function stoptimer()  
  15. {  
  16. clearTimeout(timer)  
  17. }  
  18. </script>  
  19. </head>  
  20.   
  21. <body οnlοad="scrolltop()" οnunlοad="stoptimer()">  
  22.   
  23. <div id="scrollmenu" style="position:absolute;">  
  24. <b>置顶菜单</b><br />  
  25. <a href="###">导航一</a><br />  
  26. <a href="###">导航二</a><br />  
  27. <a href="###">导航三</a><br />  
  28. <a href="###">导航四</a><br />  
  29. </div>  
  30.   
  31. <p style="height:1000px">当页面出现滚动条的时候，菜单依然置顶<br />默认为左上角置顶，当为id="scrollmenu"的style添加属性right:0则右上角置顶</p>  
  32.   
  33.   
  34. </body>  
  35. </html>  

转载于:https://www.cnblogs.com/taoxuexunhua/p/6194344.html

weixin_30500105
关注
JS技术实现动态置顶、置底、上移、下移
08-07
使用JS技术实现数据行的动态置顶、置底、上移、下移
footer置顶之js方法
第一千行代码的博客
11-05 579
var footer = document.getElementsByClassName("footer")[0];   var footer_h = footer.offsetHeight;   var footer_t  = footer.offsetTop;   var doc_h = document.documentElement.clientHeight;      //如果
jquery实现元素置顶
03-05
jquery实现元素置顶，可以实现任意的元素置顶或者距离顶部多少像素
常用JS代码实例
过客阵营 -- 简单的就要最简单
01-15 114
1. 键盘方向键监听事件和禁止复制操作 &lt;head&gt; &lt;script language=javascript&gt; document.onkeydown=nextpage var prevpage="http://www.xiaoshuo.com/jsp/readchapter.jsp?id=0011020986&amp;chapter=18912&amp;pageid=1" ...
js两种不同置顶效果
qq_40548277的博客
09-19 841
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
js实现点击选项置顶动画效果
10-14
在JavaScript实现点击选项置顶动画效果的过程中，主要涉及到了HTML结构设计、CSS样式布局以及JavaScript事件处理和动画效果。下面将详细阐述这些知识点。 首先，HTML部分创建了一个包含多个列表项（`<li>`）的无序...
php实现文章置顶功能的方法
10-21
这里的 `istop` 函数是一个JavaScript函数，通过AJAX调用后端接口实现文章的置顶或取消置顶操作： ```javascript function istop(id, flag) { $.ajax({ type: "POST", url: "?m={{'article'|encrypt}}&a=...
jQuery实现表格行上移下移和置顶的方法
10-24
本文主要介绍了使用jQuery实现表格中行上移、下移以及置顶的方法，这涉及到对网页元素特别是表格单元进行DOM操作的技巧。在当前的Web开发过程中，对页面元素的操作变得十分重要，尤其是在动态的交互式网页设计中。...
JS实现兼容性好,自动置顶的淘宝悬浮工具栏效果
10-23
- 利用变量Y来计算工具栏的offsetTop值，即其距离文档顶部的距离，这是实现置顶效果的关键。 - 根据滚动的位置来调整工具栏的CSS样式，使其在需要置顶时使用固定定位（position: fixed），在不需要时返回默认的绝对...
基于JS实现回到页面顶部的五种写法(从实现到增强)
在下魔王ii的博客
04-27 216
基于JS实现回到页面顶部的五种写法(从实现到增强) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&gt
javascript网页置顶
01-07
网页置顶
js实现置顶
weixin_33889665的博客
01-08 1498
//-----------点击事件--------------- onclick="Topfun()"     //-----------js代码--------------- &lt;script type="text/javascript"&gt;var four;function Topfun(){four=setInterval(FourscrollBy,10);}function Fou...
js数组置顶元素（将某一项移到首位）
张木期的博客
10-28 7676
js数组置顶元素（将某一项移到首位）
JS实现上一个、下一个、置顶、置底操作
书中自有妍如玉的博客
08-03 1414
/index1和index2分别是两个数组的索引值，即是两个要交换元素位置的索引值，如1，5就是数组中下标为1和5的两个元素交换位置。//上移 将当前数组index索引与后面一个元素互换位置，向数组后面移动一位。//下移 将当前数组index索引与前面一个元素互换位置，向数组前面移动一位。alert('已经处于最下，无法下移');alert('已经处于最上，无法上移');alert('已经处于最上');alert('已经处于最下');废话不多说，直接上代码。.........
JavaScript实现置顶功能
weixin_34159110的博客
07-21 2668
JavaScript实现置顶功能的方式有很多，之前也用过一些， 感觉比较复杂吧，自己最近做的东西需要，因此也在网上找了些资料，最后找到一个方法 getBoundingClientRect() 可以获取页面元素到浏览器视窗顶部的距离。最后代码如下： let len = document.getElementById('flexbox').g...
在JSP窗口中弹出窗口,且两个窗口之间能互相传递参数
x1043556915的博客
09-29 490
【代码】在JSP窗口中弹出窗口,且两个窗口之间能互相传递参数。
js:一键置顶（代码）
weixin_59519449的博客
10-11 1450
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } body{ height: 1000px; } button{ position: fixed; r.
js置顶页面
关于安安的博客
06-01 3124
//页面置顶 调用Topfun() var four; function Topfun(){ four=setInterval(FourscrollBy,10); } function FourscrollBy(eachHeight){ if(document.documentElement &amp;&amp; document.documentElement.scrollTop...
js 置顶操作
weixin_30945039的博客
04-09 211
//置顶 document.getElementById("pro-view-8").onclick = function(){document.body.scrollIntoView();} window.onscroll = function(){ if(document.body.scrollTop > 30){ if($("#pro-view-8")[0].style.disp...
微信小程序 js实现置顶
最新发布
06-08
在微信小程序中实现置顶功能，可以通过以下步骤来实现： 1. 在 wxml 文件中添加一个置顶按钮，并绑定一个点击事件： ``` <image src="/assets/images/top.png"></image> ``` 2. 在 js 文件中添加 scrollTop ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值