<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>返回顶部</title>
<script src="js/jquery.js"></script>
<script src="js/test.js"></script>
<link rel="stylesheet" type="text/css" href="css/base.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box a">产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍</div>
<div class="box bottom"></div>
<div class="location">
<p class="scroll_top">返回顶部</p>
<p class="scroll_a">产品介绍</p>
<p class="scroll_bottom">滑到底部</p>
</div>

<script type="text/javascript">
$(document).ready(function($) {
$('.scroll_top').click(function() {
$('html,body').animate({
scrollTop: '0px'
}, 800);
});
$('.scroll_a').click(function() {
$('html,body').animate({
scrollTop: $('.a').offset().top
}, 800);
});
$('.scroll_bottom').click(function() {
$('html,body').animate({
scrollTop: $('.bottom').offset().top
}, 800);
});
});
</script>

</body>

</html>

返回顶部demo的更多相关文章

  1. js返回顶部小Demo

    <style> .divH { height: 1800px; } .divT { width: 50px; height: 50px; font-size: 18px; backgrou ...

  2. 一句jQuery代码返回顶部

    一句jQuery代码返回顶部 效果体验: http://hovertree.com/texiao/yestop/ 使用方法: 只需引用jQuery库和YesTop插件,然后一句代码就可以实现返回顶部: ...

  3. jQuery实现返回顶部

    由于项目需要,写了个返回顶部的小功能... /*返回顶部*/ function toTop() { $(".to_top").hide(); $(window).scroll(fu ...

  4. 使用Javascript实现返回顶部功能。

    为了提高网站的浏览体验及友好度,相信大部分网站需要一个返回顶部的按钮,如果使用传统的a标记,再做一个div加上链接的话,非常麻烦,不仅每个页面都需要添加,而且不能实现非常智能的效果及简化维护时间. 下 ...

  5. 编写jQuery插件--实现返回顶部插件

    国庆过去一周多了,作为IT界的具有严重’工作狂‘性质的宅人,居然还没走出玩耍的心情,拖了程序猿的脚后跟了.最近工作不顺,心情不佳,想吐槽下公司,想了还是厚道点,以彼之道还施彼身,觉得自己也和他们同流合 ...

  6. 简约的返回顶部效果（jQuery）

    博客建好也快一个月了,主题是在原有主题的基础上做的修改,喜欢这样的清新简约风格,为了更好的体验,以后也会经常做修改. 一般博客的文章都比较长,看到下面不能快速返回到顶部还真是不方便,今天自己动手写了一 ...

  7. 原生js返回顶部（匀速、由快到慢）

    在项目中我们经常有需求要求页面滚动到一定位置时出现返回顶部按钮,点击即返回顶部. 方法一: 锚点,这是最简单的.(a标签的href属性等于一直要到达位置元素的id值) 方法二: js直接给页面根节点设 ...

  8. jQuery返回顶部实用插件YesTop

    只需一句jQuery代码实现返回顶部效果体验:http://hovertree.com/texiao/yestop/ 使用方法:只需引用jQuery库和YesTop插件(jquery.yestop.j ...

  9. 返回顶部的功能 div固定在页面位置不变

    1.你在网上搜索的时候,可能会搜索到div固定在页面上,不随滚动条滚动而滚动是用CSS写的,写法是position:fixed;bottom:0; 但是这个在iframe满地跑的页面实际开发中,有啥用 ...

随机推荐

  1. iosOpenDev-install 失败官方wiki无法解决看这里（尝试有效）

    https://github.com/kokoabim/iOSOpenDev/wiki/Troubleshoot http://blog.csdn.net/bluesky_03/article/det ...

  2. iOS 8 TabBar 图片显示真实颜色

    “展信颜开” 我怎么想到这个词了呢……因为这个足以表达我现在的心情,有解决了一个问题,有了一个收获. 早上小伙伴问我“用自带的tab改图的颜色他会不显示?改tabitem.”我记得是可以显示的,但是他 ...

  3. [网络技术][转]路由表查找过程(ip_route_input_slow)

     若干解释: 判断in_dev是否存在,是通过mac地址吗? 源IP地址如果是multicast,broadcast,loopback地址,意味着数据报不知道从哪来的,只能把数据报废掉了. 目标IP地 ...

  4. ArrayList和Vector的区别

    3.ArrayList和Vector的区别 答: 这两个类都实现了List接口(List接口继承了Collection接口),他们都是有序集合,即存储在这两个集合中的元素的位置都是有顺序的,相当于一种 ...

  5. Dapper学习笔记（5）-存储过程

    一.无参存储过程 第一步:创建一个不带参数的存储过程,代码如下: CREATE PROCEDURE [dbo].[QueryRoleNoParms] AS BEGIN SELECT * FROM T_ ...

  6. Longest Substring Without Repeating Characters（Difficulty: Medium）

    题目: Given a string, find the length of the longest substring without repeating characters. Examples: ...

  7. X3850M2安装CertOS 7 KVM 2--VNC

    需要安装远程桌面,否则无鼠标的日子比较难. VNC的安装需要步骤较多,重点参考以下文章: http://www.itzgeek.com/how-tos/linux/centos-how-tos/con ...

  8. Android 查缺补漏之Adapter 和 LayoutInflater

    在之前的博客我也讲过 Adapter 和 inflater,但发现讲的不够清楚,好多读者看后有疑问,今天就结合API单独讲一次. Adapter : An Adapter object acts as ...

  9. 关于spring中无法将service注入到servlet中的问题

    首先,servlet是动态网页项目区别于普通的java项目的,是动态网页项目中web.xml主要配置文件管理的,而spring只能管理普通的pojo,而没办法直接注入,尽管你的注入方式和配置方式都没有 ...

  10. String类和StringBuffer类的区别

    首先,String和StringBuffer主要有2个区别: (1)String类对象为不可变对象,一旦你修改了String对象的值,隐性重新创建了一个新的对象,释放原String对象,StringB ...