搜索
您的当前位置:首页正文

页面回到顶部的三种实现(锚标记,js)_javascript技巧

2023-12-03 来源:字库网

本文介绍三款简单的返回页面顶部代码,可以使用简单的HTML(http://www.gxlcms.com/web/62651.html) 锚标记,也可使用Javascript Scroll (http://www.gxlcms.com/article/31422.htm) 函数动态返回,其它的还有悬浮脚本等有点复杂了,本文不再介绍,大家根据自己需要选择其中的一种即可,总之简约最美的,能减少代码就减少代码,能不调用的就别调用,要不是天缘博客的文章都是牛长也不会添加这个功能。 一、使用锚标记返回页面顶部 使用HTML锚标记最简单,就是看起来有点不好看,点击后会在地址栏显示这个锚标记,其它的倒没什么。 页面顶部放置: 放置位置在标签之后随便找个地方放都可以,只要靠近顶部即可。 页面底部放置: 返回顶部 二、使用Javascript Scroll函数返回顶部 scrooll函数用来控制滚动条的位置,有两种很简单的实现方式: 方式1: 返回顶部 scroll第一个参数是水平位置,第二个参数是垂直位置,比如要想定位在垂直50像素处,改成scroll(0,50)就可以了。 方式2: 本方式是渐进式返回顶部,要好看一些,代码如下: 代码如下: function pageScroll() { window.scrollBy(0,-10); scrolldelay = setTimeout('pageScroll()',100); } 返回顶部 这样就会动态返回顶部,不过虽然返回到顶部但是代码仍在运行,还需要在pageScroll函数加一句给停止掉。 代码如下:if(document.documentElement.scrollTop==0) clearTimeout(scrolldelay); 三、使用Onload加上scroll功能实现动态返回顶部 1、首先在网页BODY标签结束之前加上: 返回顶部 2、再调用以下JS脚本部分(本脚本非天缘原创,早前来源于Z-BLOG官方论坛上收集,源包未带作者链接,如果原作者看到敬请留言添加): 代码如下: BackTop=function(btnId){ var btn=document.getElementById(btnId); var d=document.documentElement; window.onscroll=set; btn.onclick=function (){ btn.style.display="none"; window.onscroll=null; this.timer=setInterval(function(){ d.scrollTop-=Math.ceil(d.scrollTop*0.1); if(d.scrollTop==0) clearInterval(btn.timer,window.onscroll=set); },10); }; function set(){btn.style.display=d.scrollTop?'block':"none"} }; BackTop('gotop'); 对Z-BLOG而言,可以放到$(document).ready(function(){....函数中,也可以独立存成一个js文件,比如gotop.js,再通过: 来调用,当然了位置最好放在“返回顶部”标签的下面,该调用方法已假设路径为JS,其它位置请自行修改。 补充: 上述返回顶部代码都是文字式样的,也可以把文字更换为漂亮一点的图标,另外还有悬浮状的返回顶部代码(就是页面滚动时,返回顶部图标也会跟着跑的那种),需要使用到层等,搞的有点复杂了,本文暂不列出。

小编还为您整理了以下内容,可能对您也有帮助:

js怎么返回顶部js返回顶部

js如何实现回顶?

backtotop按钮实现的基本思路很简单,就是修改页面的scrollTop。难点是计算scrollTop。

要实现顶部按钮,需要考虑几个细节:

1.速度计算回到顶端

2.计时器需要关闭。不关会导致事件一直回顶。

3.当顶部的事件没有结束时,用户应该在滚动页面时关闭计时器。

/

底部:0;

右:0;

}

btn1

//有用性,避免按钮触发页面返回顶部时页面滚动。这个过程并没有完成,此时用户手动滚动,页面也不会准确的响应用户。

varbSys=true

vartimer=null

window.onscroll=function(){

//滚动页面时关闭计时器。

如果(!bSys){

clearInterval(定时器);

}

bSys=false

}

oBtn.onclick=function()

{

//每30ms执行一次scrollTopiSpeed。

timer=setInterval(function(){

varscrolltop=document.documentelement.scrolltopdocument.body.scrolltop;

//计算速度除以的值越大,速度越慢。

varispeed=math.floor(0-scrolltop/5);

if(scrollTop==0){

//如果不关闭定时器,会导致你第一次回顶,导致你无法响应用户的滚动,触发你无限回顶。由三人行大规模开放在线课程

clearInterval(定时器);

}

//当按钮开始页面滚动时,将其设置为true

bSys=true

document.documentelement.scrolltop=document.body.scrolltop=scrolltopispeed;

},30);

}

}

jsp网页返回去功能是怎么实现的?

JSP可以使用方法如下:

1、

%Stringrec=request.getHeader("REFERER");%>

inputtype="button"οnclick="javascript:window.location='%=ref%>'">

js怎么禁止浏览器的前进,后退,刷新?

history.go(-1)表示后退与刷新。如数据有改变也随之改变history.back()只是单纯的返回到上一页。

window.location.reload()

;//刷新window.history.go(1)

;//前进window.history.go(-1)

;//返回+刷新window.history.forward()

;//前进window.history.back()

;//返回

http请求返回的session怎么获得?

首先后台需要有一个方法获取session的值,因为session是存在服务端的,js是无法直接获取其值的,因为js是在客户端执行的脚本2)jquery通过ajax调用后台方法,就可以返回session值

jquery访问servlet并返回数据到页面的方法?

假设:

1、你的页面在Web-Root下,内容为:

,所用编码为utf-8

2、你的servlet为:HelloWorldServlet.java映射路径为servlet/helloWorldServlet步骤:1、引入jquery-1.6.4.min.js2、编写id为userName的输入框的点击触发函数:$("#userName").keyup(function(){$.ajax({type:"post",url:"servlet/helloWorldServlet?userName="+$(this).val(),dataType:"json",success:function(data){$("#showMsg").html(data.msg);//修改id为showMsg标签的html},error:function(){alert("请求出错");}})})

3、后台处理接收到的内容:request.setCharactorEncoding("utf-8");StringuserName=request.getParameter("userName");response.setCharactorEncoding("utf-8");PringWriterout=response.getWriter();out.print("{"msg":"你好~~"+userName+"!"}");注意事项:1、这里的编码统一为utf-82、请求路径servlet/helloWorldServlet为相对路径,因此你的页面必须在项目的Web-Root下(也就是默认的web文件夹下,名字可能因项目配置不同而改变)3、没了,记得给分哦,打字很辛苦的~

HTML网页返回顶部怎么做?

HTML网页返回顶部的做法:

1、使用默认链接锚记:只需添加一个超链接,给超链接的href属性设置值为“#top”即可实现返回顶部的功能,无需添加其他内容。

2、href指向特定id:这种方法是在页面现有的标签中,使用“返回顶部”的连接的href指向顶部具有id属性的标签,以实现返回顶部的功能。这种方法,需要在页面顶部的标签中有具有id属性的标签,来实现指向顶部。亦可自定义添加。

3、使用自定义链接锚记:这种方法,就是使用的自定义链接锚记了,必须要定义锚记,然后使用超链接指向锚。这种方法其实跟第二种方法差不多,只不过必须要额外定义一个链接锚记。

4、使用简单脚本:这种可以设置scrollTo(0,0)中的x、y的值来跳转到页面的具体位置。

5、点击返回按钮,页面想火箭一样逐渐上升,直至返回顶部。本方法能使页面动态滚动,如果把按钮做成一个火箭标志,在点击之后页面滚动时,按钮背景切换为火箭上升标志。

如何通过HTML标记或JS代码实现跳转返回页面顶部

可以通过html的锚标签来实现

<html>

<head></head>

<body>

<a id="top"></a>

.........................

<!--在返回顶部按钮处写-->

<a href="#top">返回顶部</a>

</body>

</html>

js的写法

页面上的返回顶部按钮

<button type="button" onclick="GoTop()"></button>

js中的写法

function GoTop(){

if (document.body && document.body.scrollTop && document.body.scrollLeft)

{

document.body.scrollTop=0;

}

if (document.documentElement && document.documentElement.scrollTop && document.documentElement.scrollLeft)

{

document.documentElement.scrollTop=0;

}

}

本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。

上一篇:

下一篇:

热门图文

  • 烂柯山四首。石桥刘迥其他诗词

    《烂柯山四首。石桥》刘迥其他诗词:《烂柯山四首。仙人棋》、《烂柯山四首。石桥》、《烂柯山四首》、《烂柯山四首。石室二禅师》、《烂柯山石桥》。《烂柯山四首。石桥》刘迥其他诗词:《烂柯山四首。仙人棋》、《烂柯山四首。石桥》、《烂柯山四首》、《烂柯山四首。石室二禅师》、《烂柯山石桥》。作者:刘迥。年代:唐代。我们为您从以下几个方面提供烂柯山四首。石桥的详细介绍。一、《烂柯山四首。石桥》的全文 点此查看《烂柯山四首。石桥》的详细内容。石桥架绝壑,苍翠横鸟道。凭槛云脚下,颓阳日犹蚤。霓裳倘一遇,千载长不老。二、《烂柯山四首。石桥》刘迥其他诗词《烂柯山四首。仙人棋》、《烂柯山四首。石桥》、《烂柯山四首》、《烂柯山四首。石室二禅师》、《烂柯山石桥》。相同朝代的诗歌;

  • 烂柯山四首。石桥相同朝代诗歌 烂柯山四首。石桥相同朝代诗歌有哪些

    《烂柯山四首。石桥》刘迥相同朝代诗词。《三姑石》、《暖翠》、《赠别徐侃》、《幽恨诗》、《题贾岛墓》、《天台禅院联句》、《长恨歌》、《忆江南》、《钱塘湖春行》、《暮江吟》。《烂柯山四首。石桥》相同朝代的诗词:《三姑石》、《暖翠》、《赠别徐侃》、《幽恨诗》、《题贾岛墓》、《天台禅院联句》、《长恨歌》、《忆江南》、《钱塘湖春行》、《暮江吟》作者:刘迥。年代:唐代。我们为您从以下几个方面提供烂柯山四首。石桥的详细介绍。一、《烂柯山四首。石桥》的全文 点此查看《烂柯山四首。石桥》的详细内容。石桥架绝壑,苍翠横鸟道。凭槛云脚下,颓阳日犹蚤。霓裳倘一遇,千载长不老。相同朝代的诗歌;

  • 烂柯山四首。石桥相同朝代诗歌有哪些

    《烂柯山四首。石桥》刘迥相同朝代诗词。《三姑石》、《暖翠》、《赠别徐侃》、《幽恨诗》、《题贾岛墓》、《天台禅院联句》、《长恨歌》、《忆江南》、《钱塘湖春行》、《暮江吟》。《烂柯山四首。石桥》相同朝代的诗词:《三姑石》、《暖翠》、《赠别徐侃》、《幽恨诗》、《题贾岛墓》、《天台禅院联句》、《长恨歌》、《忆江南》、《钱塘湖春行》、《暮江吟》作者:刘迥。年代:唐代。我们为您从以下几个方面提供烂柯山四首。石桥的详细介绍。一、《烂柯山四首。石桥》的全文 点此查看《烂柯山四首。石桥》的详细内容。石桥架绝壑,苍翠横鸟道。凭槛云脚下,颓阳日犹蚤。霓裳倘一遇,千载长不老。相同朝代的诗歌;

  • 烂柯山四首。石桥相同朝代诗歌

    《烂柯山四首。石桥》刘迥相同朝代诗词。《三姑石》、《暖翠》、《赠别徐侃》、《幽恨诗》、《题贾岛墓》、《天台禅院联句》、《长恨歌》、《忆江南》、《钱塘湖春行》、《暮江吟》。《烂柯山四首。石桥》相同朝代的诗词:《三姑石》、《暖翠》、《赠别徐侃》、《幽恨诗》、《题贾岛墓》、《天台禅院联句》、《长恨歌》、《忆江南》、《钱塘湖春行》、《暮江吟》作者:刘迥。年代:唐代。我们为您从以下几个方面提供烂柯山四首。石桥的详细介绍。一、《烂柯山四首。石桥》的全文 点此查看《烂柯山四首。石桥》的详细内容。石桥架绝壑,苍翠横鸟道。凭槛云脚下,颓阳日犹蚤。霓裳倘一遇,千载长不老。相同朝代的诗歌;

  • 烂柯山四首。石桥的全文 烂柯山四首。石桥的全文是什么

    《烂柯山四首。石桥》刘迥全文:石桥架绝壑,苍翠横鸟道。凭槛云脚下,颓阳日犹蚤。霓裳倘一遇,千载长不老。《烂柯山四首。石桥》全文:石桥架绝壑,苍翠横鸟道。凭槛云脚下,颓阳日犹蚤。霓裳倘一遇,千载长不老。作者:刘迥。年代:唐代。我们为您从以下几个方面提供烂柯山四首。石桥的详细介绍。一、《烂柯山四首。石桥》的全文 点此查看《烂柯山四首。石桥》的详细内容。石桥架绝壑,苍翠横鸟道。凭槛云脚下,颓阳日犹蚤。霓裳倘一遇,千载长不老。二、《烂柯山四首。石桥》刘迥其他诗词《烂柯山四首。仙人棋》、《烂柯山四首。石桥》、《烂柯山四首》、《烂柯山四首。石室二禅师》、《烂柯山石桥》。相同朝代的诗歌;

Top