如何实现点击刷新页面并同时跳转到本页面指定位置

小黑帽子 2018-12-20 08:01:39
如何实现点击刷新页面并同时跳转到本页面指定位置

a 锚文本只是跳转到指定位置，不能刷新该页面

<a href="javascript:location.replace(location.href);">刷新</a>这个只能刷新当前页面确跳转不到指定位置

那如何实现点击刷新页面并同时跳转到本页面指定位置呢？而且是同一个页面多个点击刷新跳转到指定位置
...全文
736 7 打赏 收藏 转发到动态 举报
写回复
用AI写文章
7 条回复
切换为时间正序
请发表友善的回复…
发表回复
小黑帽子 2018-12-21
  • 打赏
  • 举报
 回复
引用 1 楼 天际的海浪 的回复:
先用a 锚文本跳转到指定位置，再刷新该页面

怎么写啊


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>

<a href="#div1"> div1</a>
<a href="#div2"> div2</a>
<a href="#div3"> div3</a>
<a href="#div4"> div4</a>
<a href="#div5"> div5</a>

<div id="div1" style="width: 60px;height: 300px;background-color: #003366">
1
</div>

<div id="div2" style="width: 60px;height: 300px;background-color:#556699">
2
</div>

<div id="div3" style="width: 60px;height: 300px;background-color: #f5f5f5">
3
</div>

<div id="div4" style="width: 60px;height: 300px;background-color: #7d7d7d">
4
</div>

<div id="div5" style="width: 60px;height: 300px;background-color: #e9f1fa">
5
</div>


</body>
</html>
小黑帽子 2018-12-21
  • 打赏
  • 举报
 回复
引用 4 楼 天际的海浪 的回复:
<script type="text/javascript">

function reload() {

	setTimeout(function(){

		location.reload(true);

	}, 500);

}

</script>

<a href="#div1" onclick="reload()"> div1</a>

<a href="#div2" onclick="reload()"> div2</a>

<a href="#div3" onclick="reload()"> div3</a>

<a href="#div4" onclick="reload()"> div4</a>

<a href="#div5" onclick="reload()"> div5</a>



你这个能实现我想要的效果，但是这样写感觉页面在跳动两次一样
小黑帽子 2018-12-21
  • 打赏
  • 举报
 回复
引用 3 楼 老马历写记 的回复:
好，关于这个提问，写了个demo，见：
用锚点anchor和location.reload 实现点击刷新页面并同时跳转到本页面指定位置
https://blog.csdn.net/chuangxin/article/details/85160270
不知道是否您想要的？


非常好，是我想要的

群里看到“如何实现点击刷新页面并同时跳转到本页面指定位置”这么一个提问，于是抽空写了个demo，做了个简单实现，供大家参考。这里有2个要求：
1）要刷新页面
2）跳转到页面指定位置
如果我们简单用a标签name属性，锚点(anchor)来处理的话，只能实现跳转到页面指定位置，而不能刷新。因此，对上述提问，笔者换了下顺序，就比较容易实现了。
1）先跳转到页面指定位置；（用锚点实现即可）
2）再刷新页面；（location.reload(true)即可）

案例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Location-Anchor</title>
<script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<style type="text/css">
.box{width: 990px; margin:0 auto 10px; min-height: 400px; border:1px solid #e2e2e2;}
.box .hd{height: 30px; line-height: 30px; font-size: 16px; background:#f5f5f5; padding: 0 15px;}
</style>
</head>
<body>
<div class="box" style='min-height:0;'>
<div class="hd">
<button type="button" onclick="goFloor(1)">Go Floor1</button>
<button type="button" onclick="goFloor(2)">Go Floor2</button>
<button type="button" onclick="goFloor(3)">Go Floor3</button>
<button type="button" onclick="goFloor(4)">Go Floor4</button>
<button type="button" onclick="goFloor(5)">Go Floor5</button>
</div>
</div>
<div class="box">
<div class="hd"><a name="floor1">Floor 1</a></div>
</div>
<div class="box">
<div class="hd"><a name="floor2">Floor 2</a></div>
</div>
<div class="box">
<div class="hd"><a name="floor3">Floor 3</a></div>
</div>
<div class="box">
<div class="hd"><a name="floor4">Floor 4</a></div>
</div>
<div class="box">
<div class="hd"><a name="floor5">Floor 5</a></div>
</div>
<script type="text/javascript">
function goFloor(floor) {
var url = location.href;
url = url.indexOf('#floor') > 0 ? url.replace(/\#floor(\d)/, '#floor' + floor) : url + '#floor' + floor;
location.href = url;
location.reload(true);
}
</script>
</body>
</html>

代码说明：
1）通过设置location.href = url(带#a[name])实现锚点跳转；
2）location.reload(true); 页面重新加载，实现刷新功能；
3）构建带锚点的url，使用了字符串正则替换；

页面是否刷新验证：
1）先跳转到floor3，此时url = …#floor3
2）修改html文件，把<a name=“floor1”>Floor 1</a>改成<a name=“floor1”>Floor 1 refreshed</a>，保存文件
3）点击go floor1按钮，看页面floor1标题是否改成了“Floor 1 refreshed”。
---------------------
作者：老马历写记
来源：CSDN
原文：https://blog.csdn.net/chuangxin/article/details/85160270
版权声明：本文为博主原创文章，转载请附上博文链接！
小姐，借一个吻 2018-12-21
  • 打赏
  • 举报
 回复
当然是在你想要到的位置加一个瞄点，有了瞄点相当于有了目标，就是在标签上加上一个ID 然后在你跳转的url后面加一个#ID 就可以了 就拿当前页面举例 这是当前页面的URL： https://bbs.csdn.net/topics/392497197 ID #post-403620083 跳转：https://bbs.csdn.net/topics/392497197#post-403620083
天际的海浪 2018-12-21
  • 打赏
  • 举报
 回复 
<script type="text/javascript">
function reload() {
	setTimeout(function(){
		location.reload(true);
	}, 500);
}
</script>
<a href="#div1" onclick="reload()"> div1</a>
<a href="#div2" onclick="reload()"> div2</a>
<a href="#div3" onclick="reload()"> div3</a>
<a href="#div4" onclick="reload()"> div4</a>
<a href="#div5" onclick="reload()"> div5</a>
老马历写记 2018-12-21
  • 打赏
  • 举报
 回复
好，关于这个提问，写了个demo，见：
用锚点anchor和location.reload 实现点击刷新页面并同时跳转到本页面指定位置
https://blog.csdn.net/chuangxin/article/details/85160270
不知道是否您想要的？
天际的海浪 2018-12-20
  • 打赏
  • 举报
 回复
先用a 锚文本跳转到指定位置，再刷新该页面
jquerymobile设计完整例子
jquerymobile例子 包含从登陆到菜单和各种菜单切换完整设计 上传只为分享
用锚点anchor和location.reload 实现点击刷新页面并同时跳转到本页面指定位置
群里看到“如何实现点击刷新页面并同时跳转到本页面指定位置”这么一个提问，于是抽空写了个demo，做了个简单实现，供大家参考。关于这个问题，第1反应应该用锚点来实现。如果我们简单用a标签name属性，锚点(anchor)来处理的话，只能实现跳转到页面指定位置，而不能刷新。因此，对上述提问，我们需要变通下：先用锚点实现页面跳转到指定位置，然后通过location.reload实现刷新。
使用jQuery实现页面跳转和刷新
方法可以实现页面刷新。根据具体需求，可以在事件处理程序中动态设置目标页面的URL或者在刷新时传递参数等。在编写Web应用程序时，经常需要在用户与页面交互时进行页面跳转和刷新操作。的按钮时，会触发click事件处理程序，该处理程序将目标页面的URL赋值给。综上所述，使用jQuery可以方便地实现页面跳转和刷新操作。的按钮时，会触发click事件处理程序，该处理程序调用。函数来确保页面元素加载完毕后再执行代码。属性可以实现页面跳转，而调用。在上述代码中，我们使用了。属性，从而实现页面跳转。方法来实现页面刷新。
页面a跳转到页面b指定位置的方法
页面a跳转到页面b指定位置的方法1.锚点法a.html里：xxxb.html里加一个锚点：
这样就可以直接跳转到只能位置啦在一个页面a进行跳转方法一、跳转到顶部 1、首先我们在网页body内最上面添加一个 2、我们再到body内，需要出现点击后
使用jQuery实现页面无刷新跳转
在Web开发中，实现页面无刷新跳转是一种常见的需求。通过使用jQuery，我们可以轻松地实现这一功能。本文将介绍如何使用jQuery实现页面无刷新跳转，并提供相应的源代码示例。你可以根据自己的需求，灵活地调整代码并应用到实际项目中。最后，我们需要在页面中添加一个按钮，用于触发页面跳转。通过点击这个按钮，将触发我们之前绑定的点击事件，从而实现页面无刷新跳转。方法来发送异步请求，并在请求成功后进行页面跳转。首先，我们需要在页面中引入jQuery库。你需要根据你的实际需求，将。在上面的代码中，我们使用。
JavaScript

87,993

社区成员

224,694

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章