开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Javascript inline onclick转到本地锚点

在Javascript中，使用内联onclick事件处理器可以实现点击按钮或链接时跳转到本地锚点。以下是一个简单的示例：

<!DOCTYPE html>
<html>
<head>
 <title>Javascript inline onclick转到本地锚点</title>
</head>
<body>
  <a href="#" onclick="scrollToAnchor('section1');">跳转到锚点1</a>
  <a href="#" onclick="scrollToAnchor('section2');">跳转到锚点2</a>
  <a href="#" onclick="scrollToAnchor('section3');">跳转到锚点3</a>

  <div id="section1" style="margin-top: 500px;">锚点1</div>
  <div id="section2" style="margin-top: 500px;">锚点2</div>
  <div id="section3" style="margin-top: 500px;">锚点3</div>

 <script>
    function scrollToAnchor(anchor) {
      document.getElementById(anchor).scrollIntoView({ behavior: 'smooth' });
    }
  </script>
</body>
</html>

在这个示例中，我们使用了三个锚点链接，分别对应三个锚点。点击链接时，会触发内联onclick事件处理器，调用scrollToAnchor函数，并传入锚点的ID作为参数。scrollToAnchor函数使用document.getElementById()方法获取锚点元素，并调用scrollIntoView()方法将其滚动到视口中。

这个示例中使用的技术和概念与云计算领域无关，因此不涉及任何云计算品牌商。

相关搜索:Javascript - 出于设计原因添加锚点 Javascript从锚点克隆文本并添加到同一锚点的属性 jQuery scrollTop转到错误的锚点 jQuery:从下拉(选择)框跳转到锚点标记？js 跳转到锚点 js跳转到锚点 js跳转到锚点且慢慢滑动仅url不会更改视图或组件onclick锚点标记从链接转到网站时滚动到永久链接锚点使用href ='javascript:func()'比onclick ='func()'用于锚点是不好的做法？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

HTML跳转到页面某一位置

设计网页时，有时需要跳转到页面某一位置，下面给出了两种跳转到页面某一位置的两种方法。...下面两种方式均无滑动效果方法1：使用JavaScript控制代码：回页顶 ...方法2：使用html描点控制注意此处使用的ID来查找 bottom//跳到id为here的锚点 // 内容 //锚点ID 复制上述代码进入下面的链接测试效果： HTML/JS代码运行器

1.8K2 0

HTML标记之a标签

二、链接的种类　　　1.内部链接（当前文档与目标文档在同一站点内）；　　　2.外部链接（当前文档与目标文档不在同一站点内）；　　　3.E-mail链接（并允许访问者向指定的地址发送邮件）；　　　4.锚点连接跳转到同一网页或其他文档的指定位置：创建锚点...，显示内容链接锚点，显示内容；　　　5.空链接，就是没有目标端点的链接，显示内容...、链接的高级用法　　①.设为首页:添加到收藏夹。

2.4K4 0

九、知识拓展

W3C标准不推荐在href里面执行javascript语句 2、 "` 这种方法是很多网站最常用的方法...3、"` 这种方法跟跟2种类似，区别只是执行了一条空的js代码。...综合上述，在a中调用js函数最适当的方法推荐使用： 1三、href="URL"的作用1、URL为绝对URL此时指向另一个站点，比如href=“http://write.blog.csdn.NET”,那么点击时就会直接跳转到这个链接的页面...3、锚 URL 此时指向页面中的锚，比如href="#top"，那么点击时就会到当前页面中id="top"的这个锚点，实现当前页面的所谓跳转。

9332 0

基于JS实现回到页面顶部的五种写法(从实现到增强)

写法【1】锚点　　使用锚点链接是一种简单的返回顶部的功能实现。...该实现主要在页面顶部放置一个指定名称的锚点链接，然后在页面下方放置一个返回到该锚点的链接，用户点击该链接即可返回到该锚点所在的顶部位置　　[注意]关于锚点的详细信息移步至此 <body style="...如果没有提供该参数，默认为true 　　使用该方法的原理与使用<em>锚</em><em>点</em>的原理类似，在页面最上方设置目标元素，当页面滚动时，目标元素被滚动到页面区域以外，点击回到顶部按钮，使目标元素重新回到原来位置，则达到预期效果...div> 2】动画增强　　为回到顶部增加动画效果，滚动条以一定的速度回滚到顶部　　动画有两种：一种是CSS动画，需要有样式变化配合transition；一种是<em>javascript</em>...动画，使用定时器来实现　　　　在上面的5种实现中，scrollTop、scrollTo()和scrollBy()方法可以增加动画，且由于无样式变化，只能增加<em>javascript</em>动画　　定时器又有setInterval

4.9K2 1

Html标签href的困惑记载

而对于Href第三点～指向页面中的锚，如下用法：需要转到地方添加，文字，注意href值是#开头+英文字母命名需要在被转到位置添加，点击这种链接，从而使得页面被刷新。...（很认同，原话出自：张鑫旭） ---- 此段15-08-19 20:06更新：今日在博客园～神人唯吾的标签的href和onclick属性这篇文章中看到了一个说法：尽量不要用javascript...总结：#包含了一个位置信息默认的锚是#top 也就是网页的上端; 而javascript:void(0)仅仅表示一个死链接，没有任何信息。...故此：此处当不依靠href属性做页面跳转时候，最好还是用javascript:;更优一点。 ---- Gui求指点，欢求吐槽！

3.3K5 0

链接中 href=# 和 href=### 的区别以及优缺点

首先，标签 + onclick='{jscode}' 是很常用的一种 js 运用方式，而不使用 href='javascript:{jscode}' 是为了兼容多种浏览器对标签的解释和处理不同...简单地说，就是说如果想定义一个空的链接，又不跳转到页面头部，可以写href="###"。...说白了"###" 就是一个不是锚点的字符串浏览器找不到也不会跳到页首，原理就是依赖了网页的报错机制，找不到就不做处理。有些人说，不喜欢“###”因为他会改变链接。...都是使用一直用javascript:void(0)或者javascript:。...为防止点击链接后跳转到页首，onclick事件return false即可。如有其他想法可在下面回帖

1.6K12 0

HTML锚点

以前只是知道有锚点这么个东西，一直没有用到，昨天做毕设用到了锚点，现在总结一下控制锚点的几种情况： 1. 在同一页面中跳转到add 2....在不同页面中，锚点定位在a.html中，从另外一个页面的链接跳转到这个锚点跳转到a.add 3....点击链接触发js事件，同时跳转到锚点，有两种处理方式：第一种：触发add函数并跳转到add锚点 ...-- 假设一个需要跳转到的节点 --> <a href="#" onclick="document.getElemetnById('divNode').scrollIntoView(true);return

3.6K0 1

navigateTo:fail page pagesgoodsDetailsjavascript:void(0); is not found

void(0)表示不作任何操作，这样会防止链接跳转到其他页面。这么做往往是为了保留链接的样式，但不让链接执行实际操作。... 点击链接后，页面不动，只打开链接 href=”javascript:void(0);”与href...例如默认的锚点是＃top 也就是网页的上端而javascript:void(0) 仅仅表示一个死链接这就是为什么有的时候页面很长浏览链接明明是＃可是跳动到了页首而javascript:void(...0) 则不是如此所以调用脚本的时候最好用void(0) 使用javascript的方法文字...文字补充 <a href="<em>javascript</em>:hanshu

8762 0

HTML 锚点三种实现方法

在网页中经常用到锚点，特别是在比较长的页面中锚点的使用会增加用户体验。下面介绍下锚点三种实现方法： 1....在不同页面中锚点定位在a.html中，从另外一个页面的链接跳转到这个锚点跳转到a.add 3....点击链接触发js事件，同时跳转到锚点，有两种处理方式：第一种：触发add函数并跳转到add锚点第二种： scrollIntoView... 通过scrollIntoView实现锚点效果 scrollIntoView()的用法 scrollIntoView是一个与页面（容器）滚动相关的API，该API只有boolean类型的参数能得到良好的支持

3.3K3 0

点击按钮，回到页面顶部的5种写法

1.锚点方式： 1 2 3 <a href="#topAnchor" style="position...如果没有提供该参数，默认为true,使用该方法的原理与使用<em>锚</em><em>点</em>的原理类似，在页面最上方设置目标元素，当页面滚动时，目标元素被滚动到页面区域以外，点击回到顶部按钮，使目标元素重新回到原来位置，则达到预期效果...content:‘回到顶部’; width: 40px; color:peru; font–weight:bold; } .box–in{ visibility: visible; display:<em>inline</em>–block... 【2】动画增强为回到顶部增加动画效果，滚动条以一定的速度回滚到顶部动画有两种：一种是CSS动画，需要有样式变化配合transition；一种是<em>javascript</em>...动画，使用定时器来实现　　在上面的5种实现中，scrollTop、scrollTo()和scrollBy()方法可以增加动画，且由于无样式变化，只能增加<em>javascript</em>动画定时器又有

2.3K3 0

操作滚动条小结：scrollIntoViewanimate等方法的来龙去脉

操作滚动条可以通过锚点跳转，JS操作滚动条，与scrollIntoView等方法。对此，我来考古一下。...锚点跳转滚动滚动条网页中的锚点跳转是HTML早期功能之一，锚点（anchor）跳转是1991年发布的HTML标准的一部分，这是超文本链接的基本特性。...锚点跳转通过使用标签的href属性来创建指向页面内部某个ID或名称（使用id或name属性标记的）的链接来实现。Jump to Section 1即使是最早的Web浏览器，如NCSA Mosaic，也支持页面内通过锚点进行跳转...behavior: 'smooth' });// 使用scroll实现同样的滚动效果window.scroll({ top: 100, left: 100, behavior: 'smooth' });但是要滚动锚点位置

2221 0

我们应该知道的标签

href="#">返回顶部注意：设置超链接时，如果不确定要链接到哪个位置处时，请使用#，因为 href="",会刷新页面，而href="#",还在这个页面，默认回到最顶部 4、锚点...作用在页面中的某行位置处，做一个记号，方便页面能够随时跳转到记号位置处使用方式定义锚点 1、通过 a 标记的 name 属性定义锚点内容 2、通过任意标记的 id 属性定义锚点链接到锚点 1、跳转到本页的锚点处内容 2、跳转到其他页锚点处...内容 5、链接到JS 执行JS功能我们应该经常会看到这样的写法 <a href...href="#"与href="<em>javascript</em>:void(0)"的区别 # 包含了一个位置信息，默认的锚是#top 也就是网页的上端。

1.5K1 0

XSS绕过姿势

document.write在页面输出: 代码:document.write(location.hash.substring(1)) 直接在页面输出锚点id，构造一个带...xss的锚点即可。...Onclick事件： Onmousedown事件： <input type="text" name...行内样式（inline style）: 我们同样可以在行内样式里利用 IE 浏览器支持的动态特性：过滤器会检查关键字...允许攻击者加载一个外部 CSS 样式表是相当危险的，因为攻击者现在可以在原始页面中执行 JavaScript 代码了。

3.2K2 0

Html小知识总结

="openZoosUrl();return false;"> onclick="return false" 3、display:block;块级元素，也就是说它可以设置一些宽高，独占一行，比如，div...元素，p元素等display:inline-block,行级元素，也就说它可以使得同样设置成行级元素的元素一起在一行，然后可以设置宽高，这个适应于制作一个导航菜单，将每个菜单项设置成行级元素。...dispaly:inline.行级元素，不可设置宽和高，默认宽高是内容的宽和高，典型的比如，span, 4、html鼠标小手： cursor:pointer; 5、html背景图属性： background-size...那么就有这个属性了 overflow:hidden; 也就是你本身是属于父级元素的，但是你float就脱离了文本，变成浮动的，所有就不会在用父子元素的空间，所以就父级加上这个overflow:hidden; 13、锚点的设置...在你想跳转的页面的地方加上：然后在你想加链接的地方加上去找锚点 14.点击换验证码图片 <img src="..

1.4K12 0

HTML基础入门

多个元素能够在一行内排列出来 ,,,,,, 作用：为了包裹文本并处理文本的样式 display:inline... 3、锚点锚点能够在页面的任意位置处做记号，允许在任何情况下跳转到该记号位置处锚点的使用方式： 1、...定义锚点 1、通过 a 标记的 name 属性来定义锚点内容...2、通过任意标记的 id 属性来定义锚点 2、链接到锚点 <a href=

2.9K2 0

html核心知识

="test">style设置样式优先级比class、id要高浏览器预览效果图如下： html与JavaScript的交互：通过定义事件比如onClick...等进行关联调用JavaScript函数网页标题 ...#test { color: green; } 点击第一行弹出文字 <span...为了更好的夯实基础，可通过下面网站进行系统学习html相关知识点：3wschool 该网站的教程有很多小例子，几乎覆盖大部分知识点。根据例子一点点实践，很快就可以掌握html相关知识。

2102 0

Web专题分享

[跳转到指定的网址: http://www.baidu.com [跳转到同一个项目中的文件: 路径/xxx.html] name : 自定义框架名称 , 表示当前链接在指定的内联框架中打开 target...> 点击此处,弹个框链接内容除了可以使用文本外,也可以使用图片锚链接定义锚需要显示的内容使用锚链接链接文本 /...--同一个页面跳转--> 链接文本 / 图片 <!...垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于 inline 状态的盒子推开。水平方向的内边距、外边距以及边框会被应用且会把其他处于 inline 状态的盒子推开。...innerHtml来获取第二类：获取input中的值 value 来获取添加点击事件事件：是一个具有某些功能的函数点击事件：鼠标点击某个元素的时候出发的功能添加点击事件的方法：找到元素元素.onclick

2.5K2 0

IOS开发系列——UIWebView专题【整理，部分原创】

其解决方法需要Javascript和navtive code一起来做，其基本原理可参考这片文章，其流程是在Javascript handler中每创建Ajax的请求时，需要将这段js存在ajax_handler.js...部分内容参考于stackoverflow 2.1.4UIWebView载入带有锚点(anchor)的URL时存在的问题及解决办法 UIWebView载入带有锚点(anchor)的URL时存在的问题及解决办法...UIWebView加载带有锚点的URL(如"file:///Users/admin/home.html#pos"),程序使用javascript的range.surroundContents方法在网页中为选中文字创建高亮标签...经过一番尝试，摸索出一种解决办法，具体如下：在javascript代码的结尾部分添加一句kk="###"; 通过这样的尝试，成功让UIWebView不再跳转到初始加载位置。...PS：如果UIWebView加载的URL不带锚点，是不会出现上述问题的。

8634 0

《HTML5实战》Lesson08

Week09 2016/11/09上午1-4节一、完成文件编辑器浏览视图，代码3-1到3-3，效果如下图：知识点如下： 1、display：block 里用display：block有用么？..._百度知道 2、inline-block CSS - inline-block 3、border-radius: CSS3 border-radius 属性 w3school在线测试工具 v1.2...事件判断用户关闭浏览器-beforeunload事件 - zollty的专栏 - 博客频道 - CSDN.NET 4、location.hash 锚点定位：location.hash..._星期六_新浪博客 5、hashchange事件 location.hash详解 - 吊儿郎当 - 博客园 6、javascript 引号用法浅析Js中的单引号与双引号问题_javascript技巧..._脚本之家 7、confirm JavaScript confirm() 函数 - JavaScript window 对象 - JavaScript BOM 教程 - JavaScript教程 HTML

6954 0

ASP.NET AJAX(3)__UpdatePanel

这里需要注意一点：将 Timer 控件的 Interval 属性设置为一个较小值会产生发送到 Web 服务器的大量通信，对服务器的压力会明显提升。...Studio 2008中创建网站，默认的customErrors结点是被注释掉的，我们对这个节点做如下操作 1.首先将注释取消，然后设置mode="On"，defaultRedirect设置为我们要跳转到的错误页面...，这里我们让他跳转到我们将要创建的Error.aspx， 2，创建这个Error.aspx，里面添加一些自定义的错误提示 3.创建一个要发生错误的页面在按钮点击事件中抛出一个异常，然后浏览页面，点击按钮，就会自动跳转到我们设定的默认错误页面...类就是简单的两个公有字段Content和Time,这样我们就完成了一个类似论坛回帖的这么一个效果，但是，我们现在每次更新都是更新的整个UpdatePanel,随着这个回复的增加，服务器端需要处理并发回的数据量就会一点一点增加

4.9K5 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭