js回到顶部 动画速度 (自己记录)
x=x-20; 设置回到每10s的速度,
function gotoTop()
{
var x=document.body.scrollTop||document.documentElement.scrollTop;
var timer = setInterval(function()
{
x=x-20;
if(x<20)
{
x=0;
window.scrollTo(x,x);
clearInterval(timer);
}
window.scrollTo(x,x);
},10);
}
锚点设置:
$(".item").on('click',function(){
if($('#' + $(this).attr("name")).offset() != undefined)
{
$("html, body").animate({
scrollTop: $('#' + $(this).attr("name")).offset().top + "px"
}, {
duration: 500,
easing: "swing"
});
return false;
}
});
点击dom设置id或者name属性即可 此处使用的是name
js回到顶部 动画速度 (自己记录)的更多相关文章
- js回到顶部------转载
[1]锚点 使用锚点链接是一种简单的返回顶部的功能实现.该实现主要在页面顶部放置一个指定名称的锚点链接,然后在页面下方放置一个返回到该锚点的链接,用户点击该链接即可返回到该锚点所在的顶部位置 [注意] ...
- 详解原生JS回到顶部
第一次知道可以用超链接(锚点)实现回到顶部的时候我是很震惊的,想着原来可以这么简单啊!但是作为一个正在学习JS的小白,不能就这么轻易止步,所以查资料自己整了一个JS返回顶部. HTML代码: ? 1 ...
- javascript 回到顶部 动画效果
上代码: <!DOCTYPE html> <html> <head> <meta content="测试demo" name=" ...
- js回到顶部
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 原生js回到顶部
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- JS回到顶部代码小记
HTML: <div id="goTop"> <a href="#top"><img src="~/Content/th ...
- css+js回到顶部
.backToTop { display: none; width: 18px; line-height: 1.2; padding: 5px 0; background-color: #000; c ...
- JS 回到顶部
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 通过js实现回到顶部功能
许多商城网址,当我们滚动到一定高度时,我们会发现一般会出现一个回到顶部的js选项,点击轻松实现回到顶部,交互效果会显得比较人性化,且回到顶部过程中若在滚动滚动条时可以停止滚动,现在让我们来实现吧 我总 ...
随机推荐
- 微信小程序开发教程(七)逻辑层——.js详解
逻辑层,是事务逻辑处理的地方.对于小程序而言,逻辑层就是.js脚本文件的集合.逻辑层将数据进行处理后发送给视图层,同时接收视图层的事件反馈. 微信小程序开发框架的逻辑层是由JavaScript编写.在 ...
- HDU 1160 FatMouse's Speed (最长上升子序列)
题目链接 题意:n个老鼠有各自的重量和速度,要求输出最长的重量依次严格递增,速度依次严格递减的序列,n最多1000,重量速度1-10000. 题解:按照重量递增排序,找出最长的速度下降子序列,记录序列 ...
- HDU 1019 Least Common Multiple GCD
解题报告:求多个数的最小公倍数,其实还是一样,只需要一个一个求就行了,先将答案初始化为1,然后让这个数依次跟其他的每个数进行求最小公倍数,最后求出来的就是所有的数的最小公倍数.也就是多次GCD. #i ...
- HDU 1251 统计难题 (裸的字典树)
题目链接 Problem Description Ignatius最近遇到一个难题,老师交给他很多单词(只有小写字母组成,不会有重复的单词出现),现在老师要他统计出以某个字符串为前缀的单词数量(单词本 ...
- JavaScript逻辑运算符
逻辑运算符 或与非:&& || ! ----------------------------------------------------------- ...
- 查看 CUDA cudnn 版本
cuda 版本 cat /usr/local/cuda/version.txt cudnn 版本 cat /usr/local/cuda/include/cudnn.h | grep CUDNN_MA ...
- JSON数据生成树——(四)
1.页面中准备树的div <div class="user_left_tree_info"> <div class="user_left_tree_in ...
- Solr管理索引库——(十三)
a) 维护索引 1. 添加/更新文档 添加或更新单个文档
- Redis—数据结构之list
Redis的列表对象底层所使用的数据结构其中之一就是list. list Redis的list是一个双端链表,其由3部分构成:链表节点.链表迭代器.链表.这一设计思想和STL的list是一样的,STL ...
- 谈谈Linux内核驱动的coding style【转】
转自:http://www.cnblogs.com/wwang/archive/2011/02/24/1960283.html 最近在向Linux内核提交一些驱动程序,在提交的过程中,发现自己的代码离 ...