资源下载 - 从此开始!

下载我_精品源码软件教程资源网

您的位置:首页 > 网络学院 > 正文

几种常用网页返回顶部代码

2018-05-04 21:04 来源:www.xiazaiwo.net 编辑:admin

网站的网页中都有返回顶部的功能,就是当用户访问网页时,可以迅速的返回顶部。这里分享几种常用网页返回顶部代码。

使用锚标记

  • 1
    需在body下放个隐藏的锚点标记,内容如下:
  • 2
    然后,在网页底部放一个访问链接即可:
  • 3
    此方法效果是一次直接跳到顶部,而且URL地址栏会显示个#top。

使用JS scrollTo函数

  • 1
    javascript scroll函数(scrollBy scrollTo)是用来滚动页面到指定位置,格式定义如下:■scrollBy(xnum,ynum)■scrollTo(xpos,ypos
  • 2
    ■xnum,ynum分别指水平、垂直滚动多少像素,正值表示向右或向下滚动,负值表示向左或向上滚动
    ■xpos,ypos分别指水平和垂直坐标。

scrollBy慢速滚动返回顶部

  • 1
    本方式使用上面提到的scrollBy函数,每次只滚动定量像素,整体看起来有点滚动效果,代码如下:
  • 2
    scrollBy函数第二个参数我设了-100,越大(比如-10)滚动越慢,越小滚动越快,启动滚动只需在页面底部加个链接:

JQuery实现返回顶部功能

  • 1
    首先需要在顶部添加如下html元素:<p id="back-to-top"><a href="#top"><span></span>返回顶部</a></p>,其中a标签指向锚点top,可以在顶部防止一个<a name="top"></a>的锚点,这样在浏览器不支持js时也可以实现返回顶部的效果了。要想让返回顶部的图片显示在右侧,还需要一些css样式,如下:

打赏一下,我们会为大家提供更多优质资源!

相关文章,95%的人会看!{有内幕、有真相...}

看过本文的人还看过

关闭

微信扫一扫

站长微信账号