返回顶部demo
<!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的更多相关文章
- js返回顶部小Demo
<style> .divH { height: 1800px; } .divT { width: 50px; height: 50px; font-size: 18px; backgrou ...
- 一句jQuery代码返回顶部
一句jQuery代码返回顶部 效果体验: http://hovertree.com/texiao/yestop/ 使用方法: 只需引用jQuery库和YesTop插件,然后一句代码就可以实现返回顶部: ...
- jQuery实现返回顶部
由于项目需要,写了个返回顶部的小功能... /*返回顶部*/ function toTop() { $(".to_top").hide(); $(window).scroll(fu ...
- 使用Javascript实现返回顶部功能。
为了提高网站的浏览体验及友好度,相信大部分网站需要一个返回顶部的按钮,如果使用传统的a标记,再做一个div加上链接的话,非常麻烦,不仅每个页面都需要添加,而且不能实现非常智能的效果及简化维护时间. 下 ...
- 编写jQuery插件--实现返回顶部插件
国庆过去一周多了,作为IT界的具有严重’工作狂‘性质的宅人,居然还没走出玩耍的心情,拖了程序猿的脚后跟了.最近工作不顺,心情不佳,想吐槽下公司,想了还是厚道点,以彼之道还施彼身,觉得自己也和他们同流合 ...
- 简约的返回顶部效果（jQuery）
博客建好也快一个月了,主题是在原有主题的基础上做的修改,喜欢这样的清新简约风格,为了更好的体验,以后也会经常做修改. 一般博客的文章都比较长,看到下面不能快速返回到顶部还真是不方便,今天自己动手写了一 ...
- 原生js返回顶部（匀速、由快到慢）
在项目中我们经常有需求要求页面滚动到一定位置时出现返回顶部按钮,点击即返回顶部. 方法一: 锚点,这是最简单的.(a标签的href属性等于一直要到达位置元素的id值) 方法二: js直接给页面根节点设 ...
- jQuery返回顶部实用插件YesTop
只需一句jQuery代码实现返回顶部效果体验:http://hovertree.com/texiao/yestop/ 使用方法:只需引用jQuery库和YesTop插件(jquery.yestop.j ...
- 返回顶部的功能 div固定在页面位置不变
1.你在网上搜索的时候,可能会搜索到div固定在页面上,不随滚动条滚动而滚动是用CSS写的,写法是position:fixed;bottom:0; 但是这个在iframe满地跑的页面实际开发中,有啥用 ...
随机推荐
- WebPack 简明学习教程
WebPack 简明学习教程 字数1291 阅读22812 评论11 喜欢35 WebPack是什么 一个打包工具 一个模块加载工具 各种资源都可以当成模块来处理 网站 http://webpack. ...
- Bootstrap学习笔记（一）
一.什么是Bootstrap bootstrap是一款css框架,便于响应式设计. 二.怎样使用bootstarp 最常用的方法,在html结构中引入样式表bootstarp.min.css,以及jq ...
- python登录执行命令
#-*- coding: utf-8 -*- #!/usr/bin/python import paramiko import threading import getpass def ssh2(ip ...
- window下在同一台机器上安装多个版本jdk，修改环境变量不生效问题处理办法
window下在同一台机器上安装多个版本jdk,修改环境变量不生效问题处理办法 本机已经安装了jdk1.7,而比较早期的项目需要依赖jdk1.6,于是同时在本机安装了jdk1.6和jdk1.7. 安装 ...
- PHP store session with couchbase
如何用couchbase存储session 有两种常见方式:1.采用memcache模式连接couchbase 只需两句修改: ini_set('session.save_handler', 'mem ...
- Struts2中动态方法的调用
Struts2中动态方法调用就是为了解决一个action对应多个请求的处理,以免action太多. 主要有一下三种方法:指定method属性.感叹号方式和通配符方式.推荐使用第三种方式. 1.指定me ...
- excel表数据对比 个人收集
做了那么久猿,转行做测试以后居然折堕到要用excel来对比数据...~—~.真是人算不如天算...不过没关系,技多不压身. 首先,准备好两个对比的数据表,sheet1 跟sheet2 .在sheet1 ...
- 关于 QImage::Format_Mono
QImage::Format_Mono 为通常所讲的位图模式, QT中本提供了 QBitmap 来作为位图相关的应用, 但其最大弊端在于无法操作图片中 pixel 本身或说相关方法太过繁琐. Mono ...
- MFC 屏幕截图方法
//获取当前屏幕的并且保存图片 LRESULT CFeetScanView::SaveViewBMP(WPARAM wParam, LPARAM lParam) { CRect rect; this- ...
- Socket通信代码（原理）
1.运行环境:NetBeans IDE 6.0.1 2.说明:先运行服务器端,再运行客户端. 3.服务器端代码: 新建java类Test import java.net.*; import java. ...