jquery 从一个页面跳转到另一个页面的指定位置的实现代码
时间: 2023-09-01 13:05:32 浏览: 111
要实现jquery从一个页面跳转到另一个页面的指定位置,可以使用jquery的smoothScroll插件来实现。
首先,在要跳转的页面中,引入jquery和smoothScroll插件的js文件。例如:
```html
<script src="jquery.js"></script>
<script src="smoothScroll.js"></script>
```
接下来,在需要跳转的元素上添加一个点击事件,将希望跳转到的目标位置作为参数传递给smoothScroll函数。例如:
```html
<a href="page2.html#target" class="scroll">跳转到指定位置</a>
```
然后,在当前页面的脚本中,使用jquery的ready函数来绑定scroll类的元素点击事件。在事件处理函数中,使用smoothScroll函数来实现平滑滚动到指定位置。例如:
```javascript
$(document).ready(function() {
$('.scroll').click(function(e) {
e.preventDefault(); // 阻止默认的点击事件
var target = $(this).attr('href'); // 获取目标位置
$(window).smoothScroll({ scrollTarget: target }); // 平滑滚动到目标位置
});
});
```
最后,在目标页面的指定位置处添加一个id,用来标识该位置。例如:
```html
<div id="target">
<h1>我是目标位置</h1>
<p>欢迎跳转到这个位置</p>
</div>
```
这样,当点击带有scroll类的元素时,jquery会平滑地滚动到目标页面的指定位置处。
注意:在使用smoothScroll插件时,需要保证smoothScroll.js文件被正确引入,并且滚动到的目标位置要存在对应的id。
阅读全文
相关推荐
















