Jquery网页内滑动缓冲导航的实现代码
如果网页过长,需要页内导航的时候,我们一般是在目标出设置ID,比如<div id="footer"></div>,然后在当前页面某个链接地址设置如:<a href="#footer">点击指向到底部</a>,这样点击该链接后就会马上转到网页底部,默认是直接转到底部,有的访客会莫名其妙,怎么突然就到底部了。
在越来越关注用户体验的今天,这点我们要解决,下面就是一段简单的Jquery代码,实现滑动缓冲的方式实现页内导航,用户体验大大提升!
下面是代码:
<script src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript"> jQuery.fn.anchorGoWhere = function(options){ var obj = jQuery(this); var defaults = {target:0, timer:500}; var o = jQuery.extend(defaults,options); obj.each(function(i){ jQuery(obj[i]).click(function(){ var _rel = jQuery(this).attr("href").substr(1); switch(o.target){ case 1: var _targetTop = jQuery("#"+_rel).offset().top; jQuery("html,body").animate({scrollTop:_targetTop},o.timer); break; case 2: var _targetLeft = jQuery("#"+_rel).offset().left; jQuery("html,body").animate({scrollLeft:_targetLeft},o.timer); break; } return false; }); }); }; $("#mybtn").anchorGoWhere({target:1}); //这里是点击按钮的ID </script>
以上就是网页内滑动缓冲导航的实现代码,希望大家以后多多支持我们。
相关推荐
-
让网页跳转到指定位置的jquery代码非书签
调用: 复制代码 代码如下: var offset = 10; var hash = globalHash; if (hash) { scrollBodyTopTo($("div#c_"+hash).offset().top-offset); } 方法: 复制代码 代码如下: function scrollBodyTopTo(pos) { $("html,body").animate({scrollTop:pos}); }
-
jquery实现网页定位导航
不知道大家有没有注意到有的网页由于页面信息量太大所以使用了页面定位导航来实现跳转,点击旁边的菜单的某一项页面就跳到那一项对应的内容,而且我们滚动滚动条,当滚动到某一项内容,旁边菜单对应的那一项也会高亮显示.今天我就来讲讲这样的效果是如何实现的. 先贴上显示效果: 实现: 这个的页面布局很简单,大家下去多试试就OK了,值得注意的是需要在菜单布局里的每一个li里面添加a标签并且给a标签的 href 赋上对应的id号,可以让其点击立即跳到id对应的内容 然后就是jquery是如何实现的: 1.我们需
-
jQuery+css实现非常漂亮的水平导航菜单效果
本文实例讲述了jQuery+css实现非常漂亮的水平导航菜单效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 用到的背景图片tab.gif如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="
-
jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单
本文实例讲述了jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单.分享给大家供大家参考,具体如下: <!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
-
jquery实现具有收缩功能的垂直导航菜单
本文介绍一种比较常见的导航菜单是如何实现的,它具有垂直结构,点击导航主标题可以展开或者折叠二级菜单. 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>垂直导航菜单</title> <style type="text/css"> body{ margin:0; padding:0 0 12px 0
-
jQuery网页定位导航特效实现方法
本文实例讲述了jQuery网页定位导航特效实现方法.分享给大家供大家参考,具体如下: 描述:左右联动的导航,非常适合展示页面内容多,区块划分又很明显的,点击右边固定导航项时,左边的内容跟着切换.滑动滚动条的时候,右边的导航也随着左边的展示而进行高亮切换. 思路:比较滚动距离和楼层距离(相对于顶部),如果滚动距离大于等于楼层距离,即进入了相应楼层,然后通过一个变量来记录该楼层的信息,最后传递给右边高亮显示 1.点击右边固定导航项时,左边的内容跟着切换. 只需将右边a的href设置为左边区块的id加
-
JQUERY实现网页右下角固定位置展开关闭特效的方法
本文实例讲述了JQUERY实现网页右下角固定位置展开关闭特效的方法.分享给大家供大家参考.具体如下: html代码: <div class="tagbox"> <div class="tag"> <span>热门标签...</span> <ul> <li><a href='/tag/js展开收起_1.html' target="_blank">js展开收起<
-
jQuery仿京东商城楼梯式导航定位菜单
实现京东商城楼梯式导航定位菜单:滚动定位菜单项和点击定位菜单项! 涉及知识点:find().parent().offset().scroll()等jQ函数,请自觉复习各种函数! html代码: <!-- 导航菜单 --> <div id="menu"> <ul> <li>1F<span>服饰</span></li> <li>2F<span>美妆</span></
-
jQuery实现网页顶部固定导航效果代码
本文实例讲述了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/
-
jquery实现垂直和水平菜单导航栏
本文实例为大家分享了jquery菜单导航栏的实现代码,供大家参考,具体内容如下 1. HTML代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>竖直导航菜单</title> <link href="css/Vmenu.css" rel="stylesheet" /> <script
-
jQuery纵向导航菜单效果实现方法
本文实例讲述了jQuery纵向导航菜单效果实现方法.分享给大家供大家参考,具体如下: 效果如下: 核心代码如下: $( document ).ready( function(e){ var $catCont = $( ".cat-cont" ); //二级菜单div var $catList = $( ".J_Cat" ); //一级菜单li $catList.on( "mouseenter", function(){ var index = $
-
jQuery+CSS实现一个侧滑导航菜单代码
侧滑菜单在网站设计中应用比较广泛,在许多网站上都可以看到此种类型的菜单.它可以展示重点信息,使其更有可读性和美观性,满足用户体验价值! 今天小编给大家展示如何使用jquery和css实现侧滑菜单. 效果展示 源码下载 为了建立导航菜单,让我们先看看html结构: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title&g
-
jQuery插件StickUp实现网页导航置顶
实用的jQuery网页元素固定导航置顶插件StickUp,简单的jQuery插件,实现网页元素固定,如导航固定让其总是保持在视图中可见,在one-page页面中就可以看出效果,大家可以研究研究. 使用方法: 1.加载插件和jQuery <script src="js/jquery.js">script> <script src="js/stickUp.min.js">script> <link href="stic
随机推荐
- Nginx 服务器安装及配置文件详解介绍
- java生成彩色附logo二维码
- Asp.net XMLHTTP封装类(GET,Post发送和接收数据)
- JS匀速运动演示示例代码
- 計算你開發的 PHP 程式大小
- Yii2 rbac权限控制之rule教程详解
- C语言中const和C++中的const 区别详解
- 详谈表单重复提交的三种情况及解决方法
- JS Canvas定时器模拟动态加载动画
- Servlet3.0学习总结之基于Servlet3.0的文件上传实例
- Java集合删除元素ArrayList实例详解
- php实现websocket实时消息推送
- 浅谈php字符串反转 面试中经常遇到
- Vue.js 中取得后台原生HTML字符串 原样显示问题的解决方法
- java通过url读取远程数据并保持到本地的实例代码
- php面向对象程序设计中self与static的区别分析
- react+django清除浏览器缓存的几种方法小结
- linux里daily_routine实例代码详解
- OpenCV里的imshow()和Matplotlib.pyplot的imshow()的实现
- GoLang之使用Context控制请求超时的实现