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. np.argsort函数

    np.argsort函数 觉得有用的话,欢迎一起讨论相互学习~Follow Me numpy.argsort(a, axis=-1, kind='quicksort', order=None) 功能: ...

  2. [整理]前端模块化开发AMD CMD

    前端模块化开发的价值 AMD (中文版) CMD 模块定义规范 标准构建 http://seajs.org http://chaoskeh.com/blog/why-seajs.html http:/ ...

  3. [php]php总结(1)

    1.变量可以连续传递赋值2.var_dump()打印变量信息3.isset()与unset()4.可变变量$p = "temp";$$p则表示$temp变量,即最右边的变量的值为下 ...

  4. 使iis支持asp.net扩展

    打开控制面板 - 程序和功能,点击左边 “打开或关闭 Windows 功能”. 在弹出的对话框中,展开 “Internet信息服务”,展开“万维网服务”,展开“应用程序开发功能”,勾选“ASP”和“A ...

  5. 20155236 2016-2017-2 《Java程序设计》第四周学习总结

    20155236 2016-2017-2 <Java程序设计>第四周学习总结 教材学习内容总结 1.继承基本上就是避免多个类间重复定义共同行为. 继承的三个好处:减少代码冗余:维护变得简单 ...

  6. Go语言知识点笔记

    golang的花括号: 在go中,继承了C系的花括号作为一个作用域块的包含范围指示,但不同于C/C++中花括号位置可任意摆放,go要求“ { ”必须在右侧(一行代码尾部),不能单独另起一行.类似Pyt ...

  7. 关于onConfigurationChanged

    这两天测试app时,发现一个奇怪问题,app在启动后,Activity会onCreate两次,起初以为是横屏设置导致,随即在Activity中添加了android:configChanges=&quo ...

  8. rabbitmq之后台管理和用户设置(三)

    前言 前面介绍了erlang环境的安装和rabbitmq环境安装,接下来介绍rabbitmq的web管理和用户设置. 启用后台管理插件 通过后台管理插件我们可以动态监控mq的流量,创建用户,队列等. ...

  9. 虚拟机使用主机ss代理

    环境Linux mint 设置好主机ss代理,并开启[允许来自局域网的链接] 在Linux虚拟机的system setting-network手动设置代理 地址全部填入刚刚的主机地址,端口号为主机ss ...

  10. 去除TFS版本控制

    对于曾经做过TFS版本控制的项目,在版本控制服务不可用的时候,依然会在每次打开项目的时候都提示:当前项目是版本控制的项目,但是当前版本控制不可用,balabala的信息,如果是需要进行版本控制的项目在 ...