html锚点链接回到顶部,回到顶部和回到底部特效-jquery锚点移动兼容所有浏览器...

1297dc5672fbe92466f5f14baba03314.png

3efc3516b7ecb765a1f067c294640f12.png

插件描述:回到顶部和回到底部特效-jquery锚点移动兼容所有浏览器

回到顶部和回到底部在当前的网页中应用时相当广泛的

为了更好的体验,我们在回到顶部或回到底部的过程中采用一个渐进的滚动

那么我们就要用到强大的 Jquery 了。具体步骤如下:

1、在压面 body 中的任何地方加入一下代码

回到顶部

回到底部

在head中加入css#scroll {position:fixed; top:300px; right:100px;}

.scrollItem {width:20px; height:70px;border:#e1e1e1 1px solid; cursor: pointer; text-align: center; padding-top: 10px;}

当然你也可以定义自己的外观,可以放上一张图片来替代,关键的是保持id与js代码中一致,而且要将滚动导航层的position设置为fixed,这样当我们拖动滚动条的时候,滚动导航层才不会动。

2、引入jqeury库文件

在以上的JS代码中,我们可以自定义滚动速度,speed值越大,滚动越快

var speed = 1000;

那么你的页面便实现了回到顶部和底部的功能。

在此我还要多添加一个功能,那就是滑动到指定ID的元素,语法如下。需要把scrollTop设置为

$(‘#ID’).offset().top

如果你是一名站长,你可以将上面的代码放到底部模板(一般是footer.php)中,那么你的网站的所有页面都具备了这样的功能。

下载链接(包含JS文件和demo)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值