点击链接自动定位到网页某个具体位置和网站右侧导航介绍

news/2024/5/9 20:32:36/文章来源:https://blog.csdn.net/u011986449/article/details/19082667

页面点击链接后,自动定位到网页某个具体位置

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title> 
</head>
<body>
<a href="#help">帮助</a>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
......
......
<a name="help">跳到这里来</a>
</body>
</html>

下面再给大家介绍一个网页右侧导航,当页面划到相应的地方右侧导航栏慢慢显示出来!

亲们如果没有图片可以把这张图片截图拿去用哦!

如下图:




<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#pic{ background:url(http://127.0.0.1/qrj/img_14.png) no-repeat center top;height:198px; padding-top:84px; width:98px; position:fixed; right:-98px;top:100px;}
.a04{display:block; height:44px;}
.a05{display:block; height:32px;}
.a06{display:block; height:32px;}
.a07{display:block; height:32px;}
</style>
<title>test</title> 
</head>
<body>
试试看吧!
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<a name="haha">哈哈</a>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<a name="nihao">你好</a>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<a name="gaoxing">高兴</a>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<a name="ok">OK</a>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
......
......
<div id="pic">
<a href="#haha" class="a04"></a><a href="#nihao" class="a05"></a><a href="#gaoxing" class="a06"></a><a href="#ok" class="a07"></a>
</div>
</body>
<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript">
$(function(){var flag=true;$(window).scroll(function(){		     if($(window).scrollTop() >=400 ){if(flag==true){flag=false;	$("#pic").animate({'right':'0'},500);					 }					  		 				 }else{					     				 if(flag==false){					flag=true; 	$("#pic").animate({'right':'-98px'},500);									 }		 			  }})
})
</script>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_871753.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

大型网站架构提速关键技术(页面静态化、memcached、Mysql优化)

大型网站关键技术介绍 1. pv值(page views),访问量大 带来问题 a. 流量大 10000000*2m ->解决方案 买带宽 ,优化程序(处理图片) b. 并发量,同时访问网站的人多.,解决方案 对程序的架构重新设计.->服务器集群 示意图: 1. 数据量大->10亿记录 解决方法是 a. 表的…

问答网站Quora副总裁杨蕾博士:让知识改变世界

????点击上方蓝字星标“Robinly”&#xff0c;获取更多重磅AI访谈 Robin.ly 是立足硅谷的视频内容平台&#xff0c;服务全球工程师和研究人员&#xff0c;通过与知名人工智能科学家、创业者、投资人和领导者的深度对话和现场交流活动&#xff0c;传播行业动态和商业技能&am…

Nginx对某个目录或整个网站进行登录认证的方法

比如要对 网站目录下的 test 文件夹 进行加密认证 首先需要在opt 的主目录中 /opt/ 创建一个新文件 htpasswd 此文件的书写格式是 用户名:密码 每行一个账户 并且 密码必须使用函数 crypt(3) 加密 官方档说 可以用 Apache 的 htpasswd 工具来创建密码文件 [rootlocalhost /]#…

网站分析基础概念之访问停留时间

类型&#xff1a;计数度量 定义&#xff1a;访问停留时间&#xff08;Visit Duration&#xff09;是指一次访问的持续时间。典型的计算方法是在一次访问中&#xff0c;用户最后一次操作发生的时间减去第一次操作发生的时间。 扩展&#xff1a; ● FAQ&#xff1a;为什么访问停留…

网站分析基础概念网页浏览数

■网页浏览数 类型: 计数度量 定义:网页浏览数&#xff08;Page Views&#xff0c;简称PV&#xff09;是指网页被浏览的次数。只要网页与服务器端完成一次请求&#xff0c;网页的浏览数就被累加一次。 说明&#xff1a;为了便于大家的理解&#xff0c;下面举例说明一下。下图是…

网站分析基础概念之新近度

类型&#xff1a;计数度量 定义&#xff1a;新近度&#xff08;Recency&#xff09;是指在一段时间内&#xff0c;访问过网站的访问者距离上次访问的时间间隔。也就是“访问频率”。 举例说明&#xff1a;2014年5月份&#xff0c;“综合购物网”的访问数&#xff08;Visits&…

网站站内数据分析

从来不喜欢说自己的感受。为什么呢&#xff0c;因为在现在这个社会&#xff0c;没有人会真正的去听你的感受。绝大多数人都只看重结果。所以即使有人问&#xff0c;我也不愿说。 一直以来&#xff0c;总喜欢给自己很大的压力。我是一个很怕被甩到后面的人。自尊心强&#xff0c…

python django学习制作一个音乐网站并将项目部署到阿里云服务器上

本音乐网站参考了黄永祥编写的书本《玩转Django 2.0》。 网址&#xff1a;http://xiaomokuaipao.com/ 欢迎关注公众号&#xff1a;Faster_Future 一、数据库的设计&#xff1a;1.歌曲信息表&#xff1a;记录了歌曲的信息。 2.歌曲分类表&#xff1a;实现歌曲的分类。 3.歌曲动…

web前端 html+css+javascript网页设计实例 企业网站制作

(案例源码链接在文章末尾&#xff0c;仅供学习参考) 一、在浏览器中的运行结果&#xff1a; 二、部分代码 1.HTML&#xff1a; <!DOCTYPE html> <html> <head lang"en"><meta charset"UTF-8"><title>启乐官网</title&g…

社会化分享bshare代码在网站中的使用(包括https下无效的解决方法)

一、代码的安装与放置 在bshare中选择好自己喜欢的代码样式之后&#xff0c;将代码复制进网站中 放入代码后&#xff0c;就会出现分享按钮。如果想要关键词和按钮平行显示的话&#xff0c;可利用table进行放置 显示结果如下&#xff1a;乌克兰玛丽塔医院 二、bshare代码在h…

如何在Windows服务器(Windows2012)中建网站

前期准备&#xff1a;一台安装了Windows的服务器 方法一&#xff1a;&#xff08;推荐&#xff09; 直接安装phpstudy或者Windows版本宝塔&#xff08;教程可在官网找&#xff09; 方法二&#xff1a; 1、进入服务器管理&#xff1a;选择添加角色和功能&#xff08;控制面板…

seowhy杂谈区顶贴模块,如何使用?

转载于:https://www.cnblogs.com/renzhe/archive/2012/09/14/3005828.html

nitc企业网站程序 V3.2正式版 发布模块,如何使用?

转载于:https://www.cnblogs.com/renzhe/archive/2012/09/24/3005842.html

忍者X3又添新成员 IIS6批量建站

前言 此工具&#xff0c;应该允许在服务器上&#xff0c;推荐是win2003。 服务器配置 1、远程桌面 2、安装配置服务器环境&#xff0c;这里我推荐使用【网站管理助手V3】&#xff0c;如果找不到地址&#xff0c;可以到下图的 一键安装PHPMysqlZend环境&#xff0c;这个链接来获…

OEcms开源、免费企业网站系统 之 忍者X3营销插件

1、配置插件 2、都设置好了&#xff0c;就启动任务吧。 转载于:https://www.cnblogs.com/renzhe/archive/2013/06/08/3127638.html

让建站更轻松,带你进入一键初始化Wordpress by 忍者X3

1、试想一下&#xff0c;手动建立一个网站的步骤&#xff0c;我想繁琐的地方就是&#xff0c;填写数据库链接&#xff0c;用户名&#xff0c;密码&#xff0c;然后安装&#xff0c;设置关键词&#xff0c;分类&#xff0c;启动seo插件&#xff0c;设置seo插件。。。 对了&#…

SeoWhy论坛营销插件

更新日志 2013年7月21日&#xff0c;加入了帮助链接。 使用帮助 这个插件的设置项&#xff0c;非常少&#xff0c;因为功能单一&#xff0c;就是指定回复&#xff0c;或者随机回复。 进入插件。同样的是设置用户名&#xff0c;密码&#xff0c;然后切换到第二个标签。 这里设置…

网站克隆插件

前言 有比较中意的网站&#xff0c;把它变为自己的&#xff1f;这就是克隆插件。对方更新&#xff0c;你就同步更新。 做这个插件的目的就是为了一些新手&#xff0c;很大一部分朋友都需要一款智能化的软件&#xff0c;起码不要去建立cms&#xff0c;不要去配置各种复杂的设置&…

忍者X3 模板快建Template计划 建站助手打造 1分钟1个完美网站

前言 为什么要做这个功能呢&#xff1f;以往&#xff0c;我们建站是这样的过程&#xff1a;1、下载程序&#xff1b;2、上传程序&#xff1b;3、寻找模板&#xff1b;4修改模板&#xff1b;5上传模板&#xff1b;6调试模板&#xff1b;7登陆后台设置网站信息&#xff1b;8添加分…

对于网站不收录的问题,请大家理性对待

前言&#xff0c;为什么不搜录&#xff0c;做个PS图难吗&#xff1f; 很多朋友最近都在VIP群里说网站不收录的问题&#xff0c;我从做SEO的那天起&#xff0c;也跟你们一样&#xff0c;记得当初做的是一个站&#xff0c;每天去发外链&#xff0c;去发内容&#xff0c;结果第33天…