js，jquery滚动/跳转页面到指定位置的实现思路

最新推荐文章于 2023-06-27 10:26:29 发布
最新推荐文章于 2023-06-27 10:26:29 发布
阅读量273 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dou15229356480/article/details/87344218
版权

js，jquery滚动/跳转页面到指定位置的实现思路

<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript"> 
	/* function click_scroll() { 
		document.getElementById("anchor_scroll").click(); 
	} */ 
	function click_scroll() { 
		var scroll_offset = $("#pos").offset(); //得到pos这个div层的offset，包含两个值，top和left 
		$("body,html").animate({ 
			scrollTop:scroll_offset.top //让body的scrollTop等于pos的top，就实现了滚动 
		},1000); 
	} 
</script> 

<body>
	<input type="button" value="点击button跳转" onclick="click_scroll();" /> 
	<a id="anchor_scroll" href="#pos" style="display:none">点击这里本页跳转</a>
	<div>aaa</div>
	<div>aaa</div>
	<div>aaa</div>
	
	<div>aaa</div>
	<div>aaa</div>
	
	<div>aaa</div>
	<div>aaa</div>
	<div>aaa</div>
	<div>aaa</div>
	<div>aaa</div>
	<div>aaa</div>
	<div>aaa</div>
	<div>aaa</div>
	<div>aaa</div>
	<div>aaa</div>
	<div>aaa</div>
	<div>aaa</div>
	<div>aaa</div>
	<div>aaa</div>
	<div>aaa</div>
	
	<div>aaa</div>
	<div>aaa</div>
	<div>aaa</div>
	<div>aaa</div>
	<div>aaa</div>
	
	<div>aaa</div>
	<div>aaa</div>
	
	<div>aaa</div>
	<div>aaa</div>
	<div>aaa</div>
	<div>aaa</div>
	<div>aaa</div>
	<div>aaa</div>
	
	<div>aaa</div>
	<div>aaa</div>
	
	<div>aaa</div>
	<div>aaa</div>
	<div>aaa</div>
	
	<div>aaa</div>
	<div>aaa</div>
	<div>aaa</div>
	
	<div>aaa</div>
	<div>aaa</div>
	
	<div>aaa</div>
	<div>aaa</div>
	<div>aaa</div>
	
	<div>aaa</div>
	<div>aaa</div>
	
	<div>aaa</div>
	<div>aaa</div>
	<div>aaa</div>
	
	<div>aaa</div>
	<div>aaa</div>
	
	<div>aaa</div>
	<div>aaa</div>
	<div>aaa</div>
	
	<div>aaa</div>
	<div>aaa</div>
	<div name="pos"  id="pos">滚动到这里</div> 
	<div>aaa</div>
	<div>aaa</div>
	<div>aaa</div>
	
	<div>aaa</div>
	<div>aaa</div>
	<div>aaa</div>
	<div>aaa</div>
	<div>aaa</div>
	<div>aaa</div>
	<div>aaa</div>
	<div>aaa</div>
	<div>aaa</div>
	<div>aaa</div>
	<div>aaa</div>
	<div>aaa</div>
	<div>aaa</div>
	<div>aaa</div>
	<div>aaa</div>
	<div>aaa</div>
	<div>aaa</div>
	<div>aaa</div>
	<div>aaa</div>
	<div>aaa</div>
	<div>aaa</div>
	<div>aaa</div>
	<div>aaa</div>
	<div>aaa</div>
	<div>aaa</div>
	<div>aaa</div>
	
	<div>aaa</div>
	<div>aaa</div>
	
	<div>aaa</div>
	<div>aaa</div>
	<div>aaa</div>
	
	<div>aaa</div>
	<div>aaa</div>
	
	<div>aaa</div>
	<div>aaa</div>
	<div>aaa</div>
	
	<div>aaa</div>
	<div>aaa</div>
	
	<div>aaa</div>
	<div>aaa</div>
	<div>aaa</div>
	
	<div>aaa</div>
	<div>aaa</div>
	
	<div>aaa</div>
	<div>aaa</div>
	<div>aaa</div>
	
	<div>aaa</div>
	<div>aaa</div>
	
	<div>aaa</div>
	<div>aaa</div>
	<div>aaa</div>
	
	<div>aaa</div>
	<div>aaa</div>
	
	<div>aaa</div>
	<div>aaa</div>
	<div>aaa</div>
	
	<div>aaa</div>
	<div>aaa</div>
	
	<div>aaa</div>
	<div>aaa</div>
	<div>aaa</div>
	
	<div>aaa</div>
	<div>aaa</div>
	
	<div>aaa</div>
	<div>aaa</div>
	<div>aaa</div>
	
	<div>aaa</div>
	<div>aaa</div>
	<div>aaa</div>
	
</body>
dou15229356480
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jquery 仿锚点跳转到页面指定位置
xuanjiewu的专栏
10-18 1万+
js 仿锚点跳转到页面指定位置，用的是 offset() 方法  $(document).ready(function(){   var target_top = $("#qa5").offset().top;   //$("html,body").animate({scrollTop: target_top}, 1000);   //带滑动效果的跳转   $("html,body").s
jQuery实现定位滚动条位置
多啦的博客
11-08 1万+
scrollTop() 方法scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置
jquery滑动滚动条到指定元素
qq_38989173的博客
04-14 8128
【代码】jquery滑动滚动条到指定元素。
jQuery实现将div中滚动条滚动到指定位置的方法
xyr05288的专栏
11-23 1万+
参考文章： http://www.jb51.net/article/90185.htm 本文实例讲述了jQuery实现将div中滚动条滚动到指定位置的方法。分享给大家供大家参考，具体如下：一、Js代码：onload = function () { //初始化 scrollToLocation(); }; function scrollToLocation() { var mainCo
jQuery滚动到页面指定位置
SnailTyan
09-08 3461
在前端的页面开发中，经常会碰到页面跳转问题，这个跳转指的是页面内部跳转到指定位置，通常是在有滚动条的情况下，网上介绍的方法很多，本文主要是介绍jQuery函数中的一个小trick，.focus()函数。
jquery 滚动到指定位置
zxw162的博客
06-27 568
后分析原因得知,当元素.select-lists产生滚动时,$(`${id}`).offset().top计算值就会减少,那么下次滚动就会减少,此时就需要再加上元素.select-lists已滚动的距离。需求是这样的: 有一个select下拉框,当点击下拉框时,定位滚动到到被选中的这一行.如果目前被选中的是第五,那么点击select,下拉框的内容自动定位到当前行.初次点击效果是正确的,但再次点击就会出现位置异常。起初我的实现是这样的。
Jquery 滚动效果实现
流年轻逝
06-07 752
今天分享一个很实用的Jquery的滚动效果的代码，能够使用动画的和非动画，见代码： function scrollToLocation() { var messageList = $('#messageList'),//先获取到需要滚动的DIV scrollToContainer = messageList.find('li:last');//滚动到中类名为son-pan
jQuery实现平滑滚动页面到指定锚点链接的方法
10-23
在网页设计中，平滑滚动是一种提升用户体验的重要技术，它可以使用户在点击页面内的锚点链接时，页面能够平滑地、渐进式地滚动到目标位置，而非突然跳转。jQuery库提供了一种简单易用的方式来实现这种效果。本文将...
jquery 仿锚点跳转到页面指定位置的实例
12-10
总的来说，通过熟练掌握和应用jQuery的`offset()`、`position()`和`scrollTop()`方法，我们可以实现类似锚点跳转的效果，灵活地控制页面滚动到指定位置，提升用户体验。在实际开发中，这些技能对于创建响应式、交互...
JS滚动到指定位置导航栏固定顶部
10-19
最近整理一下之前做的一个项目，把滚动条动态固定顶部的代码整理出来和大家分享
纯js实现导航栏跟随滑动效果
01-24
纯js实现导航栏跟随鼠标的滑动效果，兼容ie8及其以上。
Jquery跳到页面指定位置的方法
12-11
本篇文章将详细探讨如何使用 jQuery 跳转到页面指定位置，包括 `offset()`、`height()`、`scrollTop` 以及 `animate()` 方法。 首先，`offset()` 方法是 jQuery 提供的一个用于获取元素相对于文档视口的位置的函数...
js，jquery滚动/跳转页面到指定位置
前端职场小白_炜晨科技的博客
09-07 1419
当一个页面太长,又不能把一个页面分成几个页面显示,那么就需要点击跳转到指定的位置。效果:(具体样式可自行修改)效果:(具体样式可自行修改)
使用 jQuery 滚动到一个元素
kalman2019的博客
12-31 2937
我有这个 input 元素：然后我有一些其他元素，比如其他标签的 & 个标签等...当用户点击 时，页面应该滚动到页面的最后一个元素，并且应该使用漂亮的动画来做到这一点（应该是滚动到底部而不是顶部）。页面的最后一项是带有 #submit 的 submit 按钮：动画不应该太快，应该是流畅的。我正在运行最新的 jQuery 版本。我宁愿不安装任何插件，而是使用默认的 jQuery 功能来实现这一点。
js实现页面滚动切换导航栏/点击导航栏跳转到指定位置
qq_41241767的博客
06-03 3512
js实现页面滚动切换导航栏/点击导航栏跳转到指定位置 js部分 //标题对象 var title = document.getElementById("title"); //菜单对象 var menu = document.getElementById("menu"); //正文对象 var content =...
jQuery 滚动到页面指定元素位置
qq_24604781的博客
06-06 1399
jQuery 滚动到页面指定元素位置
JavaScript 滚动页面到指定元素位置
热门推荐
陈小峰（iefreer）的专栏
07-17 8万+
页面评论功能，当评论较多时，有时需要滚动到评论头部。可以使用scrollTop方法，加上一点延时动画（animate），可访问在线演示，代码大体如下： $(document).ready(function (){ $("#scroll").click(function (){ $('html, body')
jquery 从一个页面跳转到另一个页面的指定位置的实现代码
最新发布
09-02
要实现jquery从一个页面跳转到另一个页面的指定位置，可以使用jquery的smoothScroll插件来实现。 首先，在要跳转的页面中，引入jquery和smoothScroll插件的js文件。例如： ```html <script src="jquery.js"></...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值