$(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. 简单叨叨bootstrap按钮无限层级下拉菜单的实现

    0.写在前面的话 最近看书都懈怠了,又正值新项目,虽说并不是忙得不可开交,好吧我老实交待,我就是偷懒了其实,博客也没更.言归正传,对于前端的不熟悉现在确实是个让我头疼的事情,以至于一些功能要在网络上漫 ...

  2. ubuntu系统中添加DNS服务器地址后诡异消失的解决办法

    今天查看了一下自己电脑里的ubuntu14.04系统,发现无法上网,于是ping了一下百度,出现unknown host,查了一下/etc/resolv.conf中的DNS地址,却发现我之前的修改被清 ...

  3. 1.3《想成为黑客,不知道这些命令行可不行》(Learn Enough Command Line to Be Dangerous)——手册页

    我们运行的命令行程序,通常在技术上称作shell, 它包含了一个非常强大(也很神秘)的工具,我们将用它来学习更多可用的命令.这个工具本身就是个称作'man'的命令('manual'的简写).它的参数是 ...

  4. android获取内置和外置SD卡路径 - z

    本文将介绍Android真机环境下如何获取内置和外置SD卡路径. 测试环境:三星Note3,其他手机待测试... 所需权限(AndroidManifest.xml文件里) <uses-permi ...

  5. RocEDU.课程设计2018 第六组 第三周进展 博客补交

    RocEDU.课程设计2018第六组 第三周进展 博客补交 小组成员:20155211解雪莹,20155217杨笛,20155227辜彦霖 计划完成任务:完成课设所有内容 实际完成任务:跑通老师uco ...

  6. 类加载, 静态变量初始化, String不可变, 泛型使用, 内部类

    1.java变量类型 java变量类型分:基本数据类型变量和Object数据类型变量,变量也是占用者内存的 例如: int i = 3; i这个变量保存的就是整形3, 占32位 Object a = ...

  7. UWP-开发一个具有闹钟,天气预报,翻译,语音功能的Demo

    UWP即Windows 10中的Universal Windows Platform简称.即Windows通用应用平台,在Windows 10 Mobile/Surface(Windows平板电脑)/ ...

  8. SQLAlchemy 关联表删除实验

    本实验所用代码来源于官网文档 from sqlalchemy import Table, Column, Integer, String, ForeignKey from sqlalchemy.orm ...

  9. [UOJ#461]新年的Dog划分[二分图染色、二分]

    题意 给你一张无向连通图,你并不知道有哪些边,你首先要回答这张图是否是二分图,如果是,回答这张图黑白染色过后的任意一个点集.你需要在2000次询问内找到结果,每次你可以询问原图中一个边集删掉后是否还连 ...

  10. 【Orleans开胃菜系列1】不要被表象迷惑

    [Orleans开胃菜系列1]不要被表象迷惑 /** * prism.js Github theme based on GitHub's theme. * @author Sam Clarke */ ...