JQuery下锚点的平滑跳转

对于锚点的平滑跳转,在一般的商业性质的网站上,权衡来说,要谨慎使用。

例如:让页面平滑滚动到一个id为box的元素处,则JQuery代码只要一句话,关键位置 如下:

$(“html,body”).animate({scrollTop:$(“#box”).offset().top},1000)

其中animate为JQuery的自定义动画方法,$(“#box”).offset().top表示id为box的JQuery对象距离页面顶部的偏移值,1000表示平滑动画执行的时间为1000毫秒,也就是1秒。

  // 页面内向导
$(".brief p").click(function (e) {
$(this).addClass("active_p").siblings().removeClass("active_p");
var v_id = e.target.id;
if (v_id === 'se_advantage') {
$("html, body").animate({ scrollTop: $(".advantage").offset().top }, 1000)
} else if (v_id === 'flow') {
$("html, body").animate({ scrollTop: $(".procedure").offset().top }, 1000)
} else {
$("html, body").animate({ scrollTop: $(".objective").offset().top }, 1000)
}
});

var v_id = e.target.id; 是获取被点击元素的id

jquery 在页面上根据ID定位(jQuery锚点跳转及相关操作)的更多相关文章

  1. jquery 在页面上根据ID定位(jQuery锚点跳转及相关操作) 经典

    1.锚点跳转简介 Edit 锚点其实就是可以让页面定位到某个位置上的点.在高度较高的页面中经常见到.比如百度的百科页面,wiki中的page内容. 我知道实现锚点的跳转有两种形式,一种是a标签+nam ...

  2. 如何在一个页面上让多个jQuery

    如何在一个页面上让多个jQuery共存呢?比如jquery-1.5和jquery-1.11. 你可能会问,为什么需要在一个页面上让多个jQuery共存?直接引用最新版本的jQuery不行吗? 答案是, ...

  3. Javascript/jQuery根据页面上表格创建新汇总表格

    任务背景及需求 按页面上的现成表格,用js生成新的统计表格如下: 实现思路 1,把表格数据抽取出来生成json数组 2,计算表格总数并创建空表格 3,历遍json数组把数据动态插入所有的表格,设值/a ...

  4. Jquery实现页面上所有的checkbox只能选中一个

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  5. android 通过页面上关键字快速定位代码

    这里定位微信关于页面, 当然可以直接获取当前最顶层activity 反编译apk后 搜索 strings.xml,找到对应id 搜索文件到用到id对应的成员变量,通常 是在R*.smali文件中 字符 ...

  6. html,图片上传预览,input file获取文件等相关操作

    input file常用方法: var obj=document.getElementById("upimage"); var file=obj.files[0];//获取文件数据 ...

  7. easyui页面上字段排序并与后台交互

    在开始对easyui里面页面上进行排序,感觉应该不怎么难,但是在操作的时候并没有那么简单,上网也查了很多进行排序的方法,最终总结出这个方法,供大家参考使用: 一.在easyui里面上只需 1.将要进行 ...

  8. jQuery手机端上拉刷新下拉加载更多页面

    基于jQuery手机端上拉下拉刷新页面代码.这是一款类似QQ空间客户端或者微信下拉刷新页面特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id=" ...

  9. jQuery实现页面元素智能定位

    实现过程 Js侦听滚动事件,当页面滚动的距离(页面滚动的高度)超出了对象(要滚动的层)距离页面顶部的高度,即要滚动的层到达了浏览器窗口上边缘时,立即将对象定位属性position值改成fixed(固定 ...

随机推荐

  1. 使用 flex 弹性布局 ,相关教程记录

    一.Flex布局是什么? Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为Flex布局. .box1{ dis ...

  2. PHP培训教程 PHP的运算符

    PHP中有丰富的运算符集,它们中大部分直接来自于C语言.按照不同功能区分,兄弟连PHP培训 运算符可以分为:算术运算符.字符串运算符.赋值运算符.位运算符.条件运算符,以及逻辑运算符等.当各种运算符在 ...

  3. mysql DEFAULT约束 语法

    mysql DEFAULT约束 语法 作用:用于向列中插入默认值. 说明:如果没有规定其他的值,那么会将默认值添加到所有的新记录.直线电机 mysql DEFAULT约束 示例 //在 "P ...

  4. Apache简介

    1.什么是Apache 注:Apache是目前使用最广泛的Web服务器软件. 2.发展历史 注:客户端mosaic程序是Netscape浏览器的前身,后来演变成mozilla浏览器,即我们使用的Fir ...

  5. 小波神经网络(WNN)

    人工神经网络(ANN) 是对人脑若干基本特性通过数学方法进行的抽象和模拟,是一种模仿人脑结构及其功能的非线性信息处理系统. 具有较强的非线性逼近功能和自学习.自适应.并行处理的特点,具有良好的容错能力 ...

  6. 4.16中Montage的一些变化

    用4.16版本跟着网上的几篇Montage教程(分别是对应4.6和4.8版本)做,遇到各种各样的问题,经过各种搜索和分析,最终终于搞定了. 4.16版的Montage和之前有了不小的变化,总结如下: ...

  7. CG-CTF | 上传绕过

    最近一直在做算法题,头都要大了,今天悄咪咪来一个web换换脑子,一发flag敲开♥[虽然知道这是个水题ε=ε=ε=┏(゜ロ゜;)┛]

  8. Hello Kotlin! Kotlin学习资料

    今天谷歌搞了条大新闻.宣布Kotlin成为android开发的一级(One Class)语言,这说明谷歌是被甲骨文恶心坏了,打算一步步脱离掉java或者说是甲骨文公司的束缚了.原先网上大家还琢磨着会不 ...

  9. 解决 UIAlterController 不居中问题

    最后更新:2017-06-30 现象描述 新公司做的解决的第一个bug 就是 UIAlterController 不居中,莫名其妙的飞出屏幕之外 找了很久的答案,最终在苹果论坛看到了相关的描述 We ...

  10. /etc/init.d# ./redis-server start

    root@ubuntu:/etc/init.d# ll total drwxr-xr-x root root May : ./ drwxr-xr-x root root May : ../ -rwxr ...