专栏首页强仔仔利用JQuery实现从底部回到顶部的功能

利用JQuery实现从底部回到顶部的功能

今天给大家介绍一下如何利用JQuery实现从任意地方返回顶部的功能,现在大部分网站因为篇幅比较长,所以都会设置这么一个按钮,利用这个按钮可以实现从底部返回顶部的功能。废话不多说,下面就给出这么一个例子介绍一下,它是怎么实现的。

实现方法一:

<footer>
    <p class="ft-copyright">强仔仔 Design by Linzhiqaing 蜀ICP备11002373号-1</p>
    <div id="tbox">
        <div id="log_id" style="float:left;position: relative;margin-left: -400px;margin-bottom:-5px;display: none">
            <img src="images/weixing-ma.jpg">
        </div>
        <div style="float:right;"><a id="togbook" href="#顶部的一个ID"></a></div>
        <div style="float:left"><a id="gotop"></a></div>
    </div>
</footer>

这第一个方法比较简单,就是在超链接中写上“#顶部的ID”就可以实现回到顶部的功能了,不过如果是这种方法的话就不会出现那种滑动的效果,交互性不太好。

下面在介绍一种可以实现滑动的回到顶部功能,并且可以自己设置滑动的速度和回到顶部的位置等。推荐大家用这种模式实现回到顶部的功能,下面来实现的例子。

实现方法二:

<footer>
    <p class="ft-copyright">强仔仔 Design by Linzhiqaing 蜀ICP备11002373号-1</p>
    <div id="tbox">
        <div id="log_id" style="float:left;position: relative;margin-left: -400px;margin-bottom:-5px;display: none">
            <img src="images/weixing-ma.jpg">
        </div>
        <div style="float:right;"><a id="togbook" href="#"></a></div>
        <div style="float:left"><a id="gotop"></a></div>
    </div>
</footer>

<script type="text/javascript">
    $("#gotop").click(function () {
        var speed=200;//滑动的速度
        $('body,html').animate({ scrollTop: 0 }, speed);
        return false;
    });
</script>

通过写一段js代码就可以实现回到顶部的功能了,是不是特别简单啊。

如对内容有问题或有疑义,请及时提出,不甚感谢。本人QQ:208017534

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 利用JQuery实现鼠标移动到图片上方的时候显示二维码,离开的时候不显示二维码

    今天给大家介绍一下怎样利用JQuery实现鼠标移动到图片上方的时候显示二维码,离开的时候不显示二维码的功能。 其实主要注意几点细节就可以轻松实现这样的功能了,第...

    林老师带你学编程
  • 官方mycat安装入门教程

    cd /usr/local/mycat/conf vim wrapper.conf

    林老师带你学编程
  • 数据库设计---PowerDesigner(物理模型和概念模型)

    4、建立好各个实体之间的关系之后,我们就可以转换成物理模型了:工具-generatePDM

    林老师带你学编程
  • vue动态选择select

    本文实例讲述了vue中动态select的使用方法。分享给大家供大家参考,具体如下:

    kirin
  • 论文笔记(1)--(YOLOv2)YOLO9000:Better,Faster,Stronger

    主要包括三个部分:Better,Faster,Stronger,其中前面两部分基本上讲的是YOLO v2,最后一部分讲的是YOLO9000。

    对角巷法师
  • JSP页面的注释细节

    本文链接:https://blog.csdn.net/u014427391/article/details/100020721

    用户1208223
  • 2019最佳预训练模型:非暴力美学,1/4算力超越RoBERTa

    BERT 推出这一年来,除了 XLNet,其他的改进都没带来太多惊喜,无非是越堆越大的模型和数据,以及动辄 1024 块 TPU,让工程师们不知道如何落地。

    机器之心
  • 20190116-将特定数字插入一个已经

    分析:已经排好序的列表也可能是升序也可能是降序,需要先确定列表的排序方式以升序为例,需要考虑4主要种情况:

    py3study
  • 【中文版 | 论文原文】BERT:语言理解的深度双向变换器预训练

      本文介绍一种称之为BERT的新语言表征模型,意为来自变换器的双向编码器表征量(BidirectionalEncoder Representations fr...

    郭耀华
  • ELECTRA:超越BERT,19年最佳NLP预训练模型

    BERT推出这一年来,除了XLNet,其他的改进都没带来太多惊喜,无非是越堆越大的模型和数据,以及动辄1024块TPU,让工程师们不知道如何落地。

    大数据文摘

扫码关注云+社区

领取腾讯云代金券