利用jquery 实现单页定位动画运动

首先引入jquery

第二步在样式中设置锚点 和锚链的id

<p id = "title1"></p>

<br><br><br><br><br><br><br>

<div id = "modOne"></div>

第三步  直接上代码:

jQuery(document).ready(function($) {    /*回到顶部*/        $(‘#gotop‘).click(function(){//回到顶部所在元素的 id为gotop  这里创建他的点击事件            $(‘body,html‘).animate({                    scrollTop: 0;//这个是body html 距离顶部的距离  最顶端和窗口中可见内容的最顶端之间的距离
                },                800);//点击回到顶部按钮,缓动回到顶部,数字越小越快            return false;        });    /*模块一*/    $(‘#title1‘).click(function(){        $("html,body").animate({scrollTop: $("#modOne").offset().top}, 1000);    });}
时间: 2024-07-31 14:35:02

利用jquery 实现单页定位动画运动的相关文章

利用jQuery实现一种Slider动画

关于轮播动画一种比较简单的实现机制就是 图片首先float:left排列 祖父容器定宽 父容器无限宽 然后父容器left的值一直变化就可以实现动画效果了 举例如下 <div class="changeBox_imgs"> <ul class="changeBox_imgs_list"> <li><a href="#" target="_blank"><img alt=&qu

利用jquery制作网页导航定位

我们在日常浏览网站中,由于网站包含信息量大,例如购物网站中会有许多商品.那么对于这样的情况,往往会有导航栏来帮助我们迅速的找到自己想要的信息.例如图中所示,左侧是商品列表,右侧是商品分类导航栏. 我们现在需要做到的效果是: 1.点击某个商品分类,自动跳转至具体的商品列表. 2.在鼠标滚动浏览商品的同时,根据左侧的商品信息的变化情况,右侧的分类名称会自动标红.表示现在浏览的商品正是该分类下的商品. 实现的基本思路: 1.设置锚点.在导航栏的<a>标签中,设置"href"属性为

jquery单页网站导航插件One Page Nav

这是一个轻量级的jQuery的单页网站导航插件.增加了单击后平滑滚动导航和当你浏览不同的部分时自动选择正确的导航项. changeHash: false, 改变当用户单击导航,就改变changeHash选项为true. scrollSpeed: 750, scrollThreshold: 0.5, filter: '', easing: 'swing', begin: function() { //I get fired when the animation is starting }, end

利用jquery实现百度新闻导航菜单滑动动画

前言 前两天,群里有人问百度新闻导航是如何实现的,当时由于忙于工作,没有来得及细看,恰好今天有空闲时间,索性就实现一下这个效果吧: 思路与步骤 1.利用UL创建简单横向导航: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&quo

jQuery 单页无刷新插件

现在很多网站都使用了单页无刷新效果,这里自己也封装了一个类似 PJAX 的jquery插件(支持浏览器前进后退按钮及url地址更改不跳转),方便以后在项目中应用或参考,在测试的时候注意自己的本地路径,这里采用了ajax所以不能直接点击打开,必须得在本地服务器下执行: 文件目录: index.html 为首页展示页: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8

如何利用jQuery进行简单表单验证

如何利用jQuery进行简单表单验证:利用jQuery可以进行表单验证,当然有比较复杂的表单验证,这里就不介绍了,下面就简单介绍一下如何使用jQuery进行简单的表单验证,然后大家可以通过改造进行基本的表达验证了.先看一段代码实例: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http

jQuery表单验证插件----利用jquery.metadata.js将校验规则写到控件中

一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW  访问密码 f224 二. 添加一个另外一个插件jquery.metadata.js 并把校验规则写在控件里面. 三.需要改写触发校验的方式. $("#commentForm").validate({meta: "validate"}); 四.详细代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit

jQuery 代码的层定位滑动动画效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery层动画定位滑动</tit

jQuery单页无刷新关键词查找功能

jQuery广告代码单页无刷新关键词查找功能是一款直接在数据库内查找内容,并且滑动跳转到指定的内容上,用来增加用户体验是个不错的效果. 来源:http://www.huiyi8.com/jiaoben/ jQuery单页无刷新关键词查找功能