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回到顶部 动画速度 (自己记录)的更多相关文章

  1. js回到顶部------转载

    [1]锚点 使用锚点链接是一种简单的返回顶部的功能实现.该实现主要在页面顶部放置一个指定名称的锚点链接,然后在页面下方放置一个返回到该锚点的链接,用户点击该链接即可返回到该锚点所在的顶部位置 [注意] ...

  2. 详解原生JS回到顶部

    第一次知道可以用超链接(锚点)实现回到顶部的时候我是很震惊的,想着原来可以这么简单啊!但是作为一个正在学习JS的小白,不能就这么轻易止步,所以查资料自己整了一个JS返回顶部. HTML代码: ? 1 ...

  3. javascript 回到顶部 动画效果

    上代码: <!DOCTYPE html> <html> <head> <meta content="测试demo" name=" ...

  4. js回到顶部

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 原生js回到顶部

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  6. JS回到顶部代码小记

    HTML: <div id="goTop"> <a href="#top"><img src="~/Content/th ...

  7. css+js回到顶部

    .backToTop { display: none; width: 18px; line-height: 1.2; padding: 5px 0; background-color: #000; c ...

  8. JS 回到顶部

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 通过js实现回到顶部功能

    许多商城网址,当我们滚动到一定高度时,我们会发现一般会出现一个回到顶部的js选项,点击轻松实现回到顶部,交互效果会显得比较人性化,且回到顶部过程中若在滚动滚动条时可以停止滚动,现在让我们来实现吧 我总 ...

随机推荐

  1. bzoj千题计划150:bzoj2738: 矩阵乘法

    http://www.lydsy.com/JudgeOnline/problem.php?id=2738 整体二分 二维树状数组累积 #include<cstdio> #include&l ...

  2. bzoj千题计划114:bzoj1791: [Ioi2008]Island 岛屿

    http://www.lydsy.com/JudgeOnline/problem.php?id=1791 就是求所有基环树的直径之和 加手工栈 #include<cstdio> #incl ...

  3. Spring Boot 使用IntelliJ IDEA创建一个web开发实例(五)

    使用application.ym进行多环境配置 1.配置激活选项 spring: profiles: active: dev 2.在配置文件添加若干个英文状态下的短横线即可区分 spring: pro ...

  4. 生死相依:说说JQuery中die()、live()详解[翻译]

    一个web前端工程师,应该知道jquery的.live()函数,知道它是做什么用的,但是不知它是怎么样工作的,使用起来也是不得得心应手的,甚至也没听说过.die()(去掉bind事件).即使你能熟悉这 ...

  5. 阿里云的OCS缓存机制

    OCS简介 OCS( Open Cache Service)为分布式高速缓存服务,主要实现热点数据的快速响应: OCS支持Key/Value的数据结构,兼容memcachebinary protoco ...

  6. python 操作 memcache

    目录 Memcached Memcached安装 python操作Memcached Memcache模块常用方法 Memcached Memcached是一个高性能的分布式内存对象缓存系统,用于动态 ...

  7. 对string 的操作

    相信使用过MFC编程的朋友对CString这个类的印象应该非常深刻吧?的确,MFC中的CString类使用起来真的非常的方便好用.但是如果离开了MFC框架,还有没有这样使用起来非常方便的类呢?答案是肯 ...

  8. 动态SQL中变量赋值

    在动态SQL语句中进行变量的值绑定比较麻烦,这儿做个记录 declare @COUNT int,@sql nvarchar(max) set @sql = 'select @COUNT = count ...

  9. 【逆向知识】开发WinDBG扩展DLL

    如何开发WinDbg扩展DLL WinDbg扩展DLL是一组导出的回调函数,用于实现用户定义的命令.以便从内存转储中提取特定的信息.扩展dll由调试器引擎加载,可以在执行用户模式或内核模式调试时提供自 ...

  10. input 标签禁止输入

    1.鼠标可以点击输入框,但是不能输入 readonly 例如: <input class="layui-input" readonly > 2.鼠标点击输入框出现禁用图 ...