html中点击<a>链接，页面跳到顶部的问题

最新推荐文章于 2021-11-11 15:16:04 发布
最新推荐文章于 2021-11-11 15:16:04 发布
阅读量8.9k 收藏 3
点赞数 2
分类专栏： android web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010505059/article/details/81708376
版权
android 同时被 2 个专栏收录
13 篇文章 0 订阅
订阅专栏
web
5 篇文章 0 订阅
订阅专栏

1.点击链接，页面滚动条跳到顶部的解决办法：

<a href="#">

改为

<a href="###">

2.点击链接，调用JS，页面滚动条跳到顶部的解决办法：

<a href="#" onclick="javascript:method();">

改为

<a href="#" onclick="javascript:method();return false;">

或是

<a href="###" onclick="javascript:method();">
woscsw
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
点击a标签，跳转到同一页面的指定内容，类似于点击按钮回到页面顶部效果
qq_52959651的博客
11-29 2047
点击a标签，跳转到同一页面的指定内容，类似于点击按钮回到页面顶部效果 这个效果实现方式很简单，只需要在a标签href内填上id名，在内容标签内加入id="名"便可。 下面是实现效果图 点击这个a标签 便可跳转到这个页面底下的文本框内容部分 以下是HTML代码，可以提供参考 <style type="text/css"> .shopping h1 { color: crimson; text-align: center; } .shopping ul
a标签锚点的跳转至非页面顶部
onemango的博客
03-23 1134
a标签锚点的跳转至非页面顶部 a标签锚点跳转永远是在页面顶部，如果上方有固定定位的元素，固定定位的元素会压盖住锚点跳转过来的元素，使用以下代码，模拟锚点跳转 // An highlighted block var fixedNavHeight = $('.nav-bar').outerHeight(); if (window.location.hash.indexOf('#') >= 0) ...
有关HTMl中a标签跳转到顶部的解决办法
算法与编程之美
08-08 3049
本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。问题描述<a>标签在HTML中是可以实现页面的跳转。它的定义是：标签用于定义超链接...
点击<a>标签，禁止页面自动跳到顶部的解决办法
小荷才露尖尖角
08-30 2224
     最近在开发一个小web的时候想给一个按钮增加一个弹出dialog功能，但是发现点击按钮后页面总是自动滚动至顶部，这点从用户体验上来讲是极其不爽的，于是开始跳进google大池寻求解决办法。网上的办法有很多，但是唯独下面这个生效了，转来收藏。       "平时开发的HTML表单，链接通常会使用&lt;a href="#" onclick="openWnd();"&gt;Open ne...
轻松解决页面回传后页面滚动到顶端
whpu的专栏
07-13 914
轻松解决页面回传后页面滚动到顶端         页面回传后页面滚动到顶端，造成这一问题的原因是页面回传，其实等于载入一次页面，新载入的页面会定点到页面的顶端。这一特点会造成很差的用户使用感受，如何解决这一问题呢，我们可以借用隐藏的ViewState机制保存当前页面滚动的位置，在页面回传后调用。     Test_THIN            http://schemas.microsof
a超链接之返回顶部的两种实现方法
weixin_30832983的博客
03-04 1562
1.通过css实现： 为页面顶部如body或者自己设置的盒子等加上唯一id属性 <body id="id"> .... <a href="#id">返回顶部</a> 2.js实现 通过设置标签滚动位置判断 document.body.scrollTop=0; <!DOCTYPE html> <html ...
a链接返回顶部
weixin_30709061的博客
07-24 130
在很多页面中都会有返回顶部的效果 a标签的ID为 Top 给它一个样式 #Top{ display: block; width: 50px; height: 50px; background: rgba(0,0,0,0.5); ...
通过href简单实现点击a链接跳到页面中指定的地方
09-28
本文将详细介绍如何通过`href`属性来实现点击a链接跳到页面中指定的地方，这是一种称为内部链接或锚点链接的机制。 首先，让我们了解`<a>`标签的基本结构。`<a>`标签用于创建超链接，其基本语法如下： ```html <a ...
Jquery跳到页面指定位置的方法
12-11
在网页开发中，有时我们需要实现用户点击某个元素后，页面自动滚动到另一个特定的位置，以提供更好的用户体验。jQuery 提供了简单易用的 API 来实现这个功能。本篇文章将详细探讨如何使用 jQuery 跳转到页面指定位置...
jquery实现跳到底部，回到顶部效果的简单实例(类似锚)
10-21
<a href="#" id="top">返回顶部</a> ``` 这里，`<a>` 标签的 `href="#"` 属性用于阻止页面刷新，而 `id` 属性则用于 jQuery 选择器定位这些元素。 然后，我们需要编写 jQuery 代码来处理这两个元素的点击事件。在 ...
给html超链接设置事件不使用href来完成跳
09-04
当你在`<a>`标签中使用`href="#"`并添加`onClick`事件时，浏览器会先执行`onClick`中的JavaScript函数`fun()`，然后继续尝试执行`href`的默认行为，即跳转到页面顶部的锚点。这可能导致一些意外的效果，如改变页面...
HTML中点击超链接 会跳至页面顶部的解决方法
no_head_no_hand的博客
01-06 3334
有时候我们点击超链接不需要跳转至其他页面，只需要改变页面中的某些元素的时候，我们不希望页面跳转至顶部。比如：点击 换张图 切换验证码的时候 这个时候有两种解决方式： 第一种： <a href="#" >换张图</a> <!--会跳转至页面的顶部--> 我们将其改为 <a href="##" >换张图</a> <!--保持当前页面不动--> 第二种： ...
html文本滚动到底后自动回到顶部,网页自动滚动到最顶端
weixin_36257759的博客
06-09 691
document.documentElement.scrollTop = 0回到顶部//htmlstyle="display: block; cursor: pointer;">// css.top_arrow {border: 0 none;bottom: 100px;cursor: pointer;display: block;height: auto;margin: 0;opacity...
（7）＜a＞标签之锚点和回到顶部功能
Java田根旺
11-11 1673
一、什么是锚点？ 这里，我们拿京东官网距离，如下图可以看到京东官网首页右侧的导航条选项卡，当我们点击其中一个选项卡的时候，他会自动给你定位跳到当前页的符合该选项卡标题的位置，省去我们从上往下鼠标滚轮一直翻滚的操作，节省了用户的时间，提高了用户体验度效率。 二、如何实现锚点？ 首先我们写一个内容，并且写一个<a>标签再内容的上方，该超链接不需要填写内容，使用空的即可，给该标签添加一个name属性。 然后写一个<a>标签，作为类似上边所说的京东的选项卡一样，我们使用a标签的.
Html里怎么把超链接置顶,html超链接怎么设置
weixin_42514562的博客
05-31 808
在html中可以通过标签设置超链接，该标签能定义超链接，用于从一张页面链接到另一张页，语法如“...”，其中元素最重要的属性是href属性，它指示链接的目标。本文操作环境：windows7系统、HTML5&&CSS3版、Dell G3电脑。 标签定义超链接，用于从一张页面链接到另一张页面。 元素最重要的属性是 href 属性，它指示链接的目标。在所有浏览器中，链接的默认外观是：提示...
标签a的空链接问题
shu580231的博客
08-10 539
偶然间发现，a href="#">a1会跳跃吗？a>，当页面上有滚动条的时候，点击就会跳到页面最上端，然后才知道原理，是因为，‘#’默认的锚点位置是top。 那可能会问，为什么有问题，，还要去用一个空的a标签呢，下面就是解释（摘录前辈的）： 给标签增加href属性，就意味着以下事情： :link选择器可以选择到它这个a标签可以获得焦点（可以通过tab+’回车‘按键访问到） 在
<a>标签使用技巧一则：阻止滚动条上滚。
03-09 258
在一个超链接中 可以使用href 和onlick，有时要在A的标记同时使用，在同时使用时，有时让href起作用或者失效，那么如何设计呢？ 使用javascript的时候,通常我们会通过类似： &lt;a href="#" onclick="javascript:方法"&gt;提交&lt;/a&gt; 提交 的方式,通过一个伪链接来调用javascript方法。 这种方法有一个问题是： 虽...
html a标签：返回顶部代码
ggboy6555的博客
05-25 1825
<a href="javascript:scrollTo(0,0);"><li class="foot_menu">基因产品</li></a>
<div id="app"> <!-- 顶部快捷导航start --> <div class="shortcut"> <div class="w"> <div class="fl"> <ul> <li>购物商城欢迎您！ </li> <li> <a href="#">请登录</a> <a href="#" class="style-red">免费注册</a> </li> </ul> </div> <div class="fr"> <ul> <li><a href="#">我的订单</a></li> <li class="spacer"></li> <li> <a href="#">我的购物</a> <i class="icomoon"></i> </li> <li class="spacer"></li> <li><a href="#">商城会员</a></li> <li class="spacer"></li> <li><a href="#">企业采购</a></li> <li class="spacer"></li> <li><a href="#">关注商城</a> <i class="icomoon"></i></li> <li class="spacer"></li> <li><a href="#">客户服务</a> <i class="icomoon"></i></li> <li class="spacer"></li> <li><a href="#">网站导航</a> <i class="icomoon"></i></li> </ul> </div> </div> </div> <!-- 顶部快捷导航end <img src="img/logo.png" alt="">--> <div class="car-header"> <div class="w"> <div class="car-logo"> <b>购物车</b> </div> </div> </div> </div>帮我改写成组件化
最新发布
06-10
可以将这段代码分成两个组件：顶部快捷导航和购物车头部。 1. 顶部快捷导航组件： ```html <template> <div class="shortcut"> <div class="w"> <div class="fl"> <ul> <li>购物商城欢迎您！</li> <li> <a href="#">请登录</a> <a href="#" class="style-red">免费注册</a> </li> </ul> </div> <div class="fr"> <ul> <li><a href="#">我的订单</a></li> <li class="spacer"></li> <li> <a href="#">我的购物</a> <i class="icomoon"></i> </li> <li class="spacer"></li> <li><a href="#">商城会员</a></li> <li class="spacer"></li> <li><a href="#">企业采购</a></li> <li class="spacer"></li> <li><a href="#">关注商城</a> <i class="icomoon"></i></li> <li class="spacer"></li> <li><a href="#">客户服务</a> <i class="icomoon"></i></li> <li class="spacer"></li> <li><a href="#">网站导航</a> <i class="icomoon"></i></li> </ul> </div> </div> </div> </template> <script> export default { name: "Shortcut" } </script> ``` 2. 购物车头部组件： ```html <template> <div class="car-header"> <div class="w"> <div class="car-logo"> <b>购物车</b> </div> </div> </div> </template> <script> export default { name: "CartHeader" } </script> ``` 然后在父组件中使用这两个子组件： ```html <template> <div id="app"> <Shortcut /> <CartHeader /> </div> </template> <script> import Shortcut from "@/components/Shortcut.vue"; import CartHeader from "@/components/CartHeader.vue"; export default { components: { Shortcut, CartHeader } } </script> ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值