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. 秋色园QBlog技术原理解析:性能优化篇:缓存总有失效时,构造持续的缓存方案(十四)

    转载自:http://www.cyqdata.com/qblog/article-detail-38993 文章回顾: 1: 秋色园QBlog技术原理解析:开篇:整体认识(一) --介绍整体文件夹和文 ...

  2. 【Linux】VMware及VirtualBox网络配置

    在VMware或VirtualBox中,安装完linux系统,不能连到win7 具体配置,如下. 如上.

  3. 20145202马超 2016-2017-2 《Java程序设计》第5周学习总结

    20145202马超 2016-2017-2 <Java程序设计>第5周学习总结 教材学习内容总结 异常:程序在运行的时候出现不正正常的情况 由来:问题也是可以通过java对不正常情况进行 ...

  4. 25、LinkedList特有方法

    LinkedList特有方法 public void addFirst(E e)及addLast(E e) public E getFirst()及getLast() public E removeF ...

  5. Python练习-函数(方法)的定义和应用

    需求:对文件进行增删改查,使用函数调用的方式完成操作 # 编辑者:闫龙 import MyFuncation; Menu = ["查询","添加"," ...

  6. Python练习-短小精干版三级"片儿"

    经过今天Alex大神的指点,终于打通任督二脉了!将昨天比较复杂的代码优化至此:(代码注释后期添加) # 编辑者:闫龙 #三级目录 menu = { '北京':{ '海淀':{ '五道口':{'soho ...

  7. MS Office CVE-2015-1641 恶意 Exploit 样本分析

    MS Office CVE-2015-1641 恶意 Exploit 样本分析 在对最近的一个恶意 MS Office 文档样本进行分析时,我们发现了一些有趣的特性.这个文档利用 CVE-2015-1 ...

  8. easyui表单提交验证form

    方式一,不需要考虑jquery.easyui.min.js版本 <script> $(function () { //针对 设置 novalidate:true $('.validateb ...

  9. bzoj 1034 泡泡堂BNB

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1034 题解: 很明显的贪心,读过田忌赛马的典故就很容易能想出来,分成三种情况讨论: < ...

  10. Django 内置模板标签和过滤器

    一.内置模板标签 语法:{%  %} autoescape : 是否转义,on或off作为参数,并确定自动转义是否在块内有效.该块以endautoescape结束 {% autoescape on % ...