$(function(){
$(".index_nav li a").click(function(event){ //绑定按钮的单击事件
var index = this.title; //取得点击按钮的title属性,这里就是按钮的数字
// alert(index);
var id = "#" + "index_" + index; // 取得需要跳转到的div 的 id
// alert(id);
$("html,body").animate({scrollTop:$(id).offset().top},1000) }); $(window).scroll(function(){
if ($(window).scrollTop()>100){ $("#goTop").slideDown(500);
} else{
$("#goTop").slideUp(500);
}
});
//当点击跳转链接后,回到页面顶部位置
$("#goTop").click(function(){
$('body,html').animate({scrollTop:0},1000); return false; });
}); //当滚动条的位置处于距顶部100像素以下时,跳转链接出现,否则消失
// $(function () {
// $(window).scroll(function(){
// if ($(window).scrollTop()>100){ $("#goTop").fadeIn(1500);
// } else{
// $("#goTop").fadeOut(1500);
// }
// });
// //当点击跳转链接后,回到页面顶部位置
// $("#goTop").click(function(){
// $('body,html').animate({scrollTop:0},1000); return false; });
// });
<div id="wrapper">
<ul class="index_nav">
<li><a href="javascript:void(0)" title="1"><i>主题</i><strong>1</strong></a></li>
<li><a href="javascript:void(0)" title="2"><i>主题</i><strong>2</strong></a></li>
<li><a href="javascript:void(0)" title="3"><i>主题</i><strong>3</strong></a></li>
<li><a href="javascript:void(0)" title="4"><i>主题</i><strong>4</strong></a></li>
<li><a href="javascript:void(0)" title="5"><i>主题</i><strong>5</strong></a></li>
</ul> <div class="row" id="main">
<h2 id="index_1">新年快乐</h2>
<div class="mainpage1"><img src="img/bg_3.jpg" alt="" width="1156" height="650" /></div>
</div>
</div>

1、这是li -- a 的title属性要留作获取动画目标的id值,

2、h2常用锚点链接  命名  jq义字符串拼接的方式获取,每个锚点。当有多块内容时,只需要   index_$ 累加即可

jquer导航锚点链接动画效果和返回顶部代码的更多相关文章

  1. Jquery---用jQuery实现的智能隐藏、滑动效果的返回顶部代码

    <script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.7.2.min.js"></script& ...

  2. swift-教你如何实现导航上的UISearchController动画效果。

    这个代码片段是我这周我从网上找了各种资料然后经过自己的修改终于弄好了导航的上下动画效果: step1:==>因为这个搜索要有动画效果,所以这个页面必须要有一个导航控制器: //1.自定义创建导航 ...

  3. 仿知乎/途家导航栏渐变文字动画效果-b

    demo.gif 效果图如上,简单分析下 1.导航栏一开始是隐藏的,随着scrollView滚动而渐变 2.导航栏左右两边的navigationItem是一直显示的 3.导航栏参考了途家app,使用了 ...

  4. js小效果:返回顶部 scrollTop 。 滚屏:animate

    返回顶部: (scroll 滚屏事件,如果超出第一屏,显示返回顶部的按钮) <div id="gotop" onclick="javascript:scroll(0 ...

  5. jquery animate 动画效果使用解析

    animate的意思是:使有生气:驱动:使栩栩如生地动作:赋予…以生命作为形容词:有生命的:活的:有生气的:生气勃勃的 先看动画效果:http://keleyi.com/keleyi/phtml/jq ...

  6. 背水一战 Windows 10 (42) - 控件(导航类): Frame 动画

    [源码下载] 背水一战 Windows 10 (42) - 控件(导航类): Frame 动画 作者:webabcd 介绍背水一战 Windows 10 之 控件(导航类) Frame 动画 示例An ...

  7. 每日CSS_滚动页面动画效果

    每日CSS_滚动页面动画效果 2021_1_13 源码链接 1. 代码解析 1.1 html 代码片段 <section> <h2>开 始 滑 动</h2> < ...

  8. Android开发之50个常见实用技巧——添加悦目的动画效果

    Hack.5 使用TextSwitcher和ImageSwitcher实现平滑过渡 实现步骤: 1.通过findViewById()方法获取TextSwitcher对象的引用Swithcer,当然也可 ...

  9. CSS自学笔记(14):CSS3动画效果

    在CSS3中也新增了一些能够对元素创建动画处理的属性.通过这些新增的属性,我们可以实现元素从一种样式变换成另一种样式时为元素添加动态效果,我们就可以取代网页中的动态图片.flash动画和JavaScr ...

随机推荐

  1. zabbix部署(1)(lnmp转)

    1.lnmp 首先 确保CentOS7上网络配置正确,可以正常访问互联网. 确保已经关闭了iptables. CentOS7上是firewall,关闭命令: 1 2 # systemctl stop  ...

  2. opencv7-ml之统计模型

    在opencv的ml模块中有个统计模型类,而其他的比如朴素贝叶斯分类器.knn.svm等等其他模型都是基于该模型上派生出来的.所以先介绍下该模型. 该类的定义在文件"opencv\sourc ...

  3. BZOJ 3812 : 主旋律

    非常神仙的状压DP+容斥原理. 首先,给出一个状压方程:$f_S$表示点集为$S$的情况下,整个点集构成强连通图的方案数. 这个DP方程还是比较容易想到的,但是没有办法正常转移,考虑通过容斥原理进行转 ...

  4. cache-fusion笔记

    GRD  (global resource directory)保存着所有实例中资源的分布情况 GCS  (global cache service)具体执行cache fusion 工作的服务,对应 ...

  5. 2017-2018-2 20155224『网络对抗技术』Exp5:MSF基础应用

    基础问题回答 用自己的话解释什么是exploit,payload,encode? exploit就相当于是载具,将真正要负责攻击的代码传送到靶机中,我觉得老师上课举的火箭和卫星的例子非常形象,火箭只是 ...

  6. 汇编 ADD指令

    知识点: 加法汇编指令ADD 一.加法指令 ADD(Addition) 格式 格式: ADD A,B //A=A+B; 功能: 两数相加 . OPRD1为任一通用寄存器或存储器操作数,可以是任意一个 ...

  7. [BZOJ4842]Delight for a Cat[费用流]

    题意 题目链接 分析 类似 最长k可重区间集 一题. 由于本题区间长度相同,首先可以将点的影响看成区间,区间看成点. 先默认所有位置选择事件2,选择区间看做改选事件1 .于是问题变成了求收益最大的方案 ...

  8. TICTOC: Header Only C++ Timer

    感觉最近的更新频率略高啊-哈哈- 这次的带来的是一个十分简单便利的C++计时库. 项目地址:https://github.com/miaoerduo/tictoc 欢迎Start和提MR. 项目中有详 ...

  9. spring cloud资料汇总

    https://www.cnblogs.com/Java3y/p/9540386.html#commentform --非常好的文章,里面还有海量学习资料

  10. A星寻路算法入门(Unity实现)

    最近简单学习了一下A星寻路算法,来记录一下.还是个萌新,如果写的不好,请谅解.Unity版本:2018.3.2f1 A星寻路算法是什么 游戏开发中往往有这样的需求,让玩家控制的角色自动寻路到目标地点, ...