利用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 条评论
登录 后参与评论

相关文章

来自专栏无所事事者爱嘲笑

vue中的v-cloak

1719
来自专栏柠檬先生

移动前端头部标签(HTML5 meta)

在移动前端开发中添加一些webkit专属的HTML5头部标签,帮助浏览器更好解析html代码 <!DOCTYPE html>  使用 HTML5 doctype...

1918
来自专栏移动开发面面观

React Native 一个开始

922
来自专栏大神带我来搬砖

用自动化测试工具selenium来揭露骗局的真相selenium进行页面滚动关闭chrome浏览器自动加载图片使用headless模式运行chrome删除页面上元素爬取结果分析源码

前几天写了用爬虫来揭露约稿骗局的真相,但实际上对于动态加载的数据来说,用程序爬取比较困难,在这种情况下,可以使用selenium来模拟浏览器行为,达到同样目的。

712
来自专栏DeveWork

替换WordPress 自带默认的 jQuery库, jQuery库页脚加载

在开发WordPress 主题或者WordPress 插件时候,常常要通过wp_enqueue_script这个钩子挂载WordPress 自带的 jQuery...

18710
来自专栏上善若水

046android初级篇之android多分辨率兼容

android:anyDensity="true"时,应用程序安装在不同密度的终端上时,程序会分别加载xxhdpi、xhdpi、hdpi、mdpi、ldpi文件...

402
来自专栏Material Design组件

Material Design — 提示框( Dialogs)

3469
来自专栏菩提树下的杨过

Flex4中使用HDividedBox,VDividedBox

flex4中推荐使用spark组件来布局,所以在工具箱里把HDividedBox,VDividedBox这二个非常有用的东东给隐藏掉了,只能手动在source视...

18210
来自专栏前端学习心得

懒加载和预加载

1505
来自专栏蜉蝣禅修之道

android之自定义渐变颜色(一)

1275

扫码关注云+社区