仅使用 Jquery 跳转到页面的各个部分
Jumping to sections of the page using only Jquery
我刚刚开始编码,正在学习有关JQuery的所有知识。我有一个带有"关于"和"这是什么"锚点的导航栏。各个锚点的特定内容位于页面的不同部分。如果我点击锚点,说"关于",我想跳转到网页的"关于内容"部分。我已经阅读了执行此操作的插件,但是有没有办法仅使用JQuery来做到这一点?我尝试按照类似问题的答案中所说的去做,但它不起作用。
.HTML
<ul class="nav navbar-nav">
<li class="About"> <a href="#"> About </a></li>
<li class="How-it-works"> <a href="#"> How it works </a></li>
</ul>
......
......
<div class="About-content">
<div class="container">
<div class="row">
<div class="col-xs-12">
<p> text text text </p>
</div>
</div>
</div>
</div>
杰奎里
$(document).ready(function () {
$('.About').click(function (event) {
event.preventDefault();
$('body, html').animate({
scrollTop: $(".About-content").offset.top
}, 600);
})
}
将 id 属性用于目标div:
<div id="About-content">
<div class="container">
<div class="row">
<div class="col-xs-12">
<p>text text text</p>
</div>
</div>
</div>
</div>
将导航链接设置为 Div id:
<ul class="nav navbar-nav">
<li class="About"> <a href="#About-content"> About </a>
</li>
<li class="How-it-works"> <a href="#"> How it works </a>
</li>
</ul>
使用以下简单的 jquery 实现平滑滚动:
$(document).ready(function() {
$(".About a").click(function() {
$('html, body').animate({
scrollTop: $("#About-content").offset().top
}, 2000);
});
});
- 将目标
.About-content
更改为#About-content
- 将
href
更改为#About-content
- 删除
e.preventDefault()
它应该在没有 jQ/JS 的情况下运行,但如果您在动画中添加缓动,那么它会很有用。
$(document).ready(function() {
$('.About').click(function(event) {
$('body, html').animate({
scrollTop: $("#About-content").offset().top
}, 600);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav navbar-nav">
<li class="About"> <a href="#About-content"> About </a>
</li>
<li class="How-it-works"> <a href="#"> How it works </a>
</li>
</ul>
<div style="height: 1000px;"></div>
<div id="About-content">
<div class="container">
<div class="row">
<div class="col-xs-12">
<p>text text text</p>
</div>
</div>
</div>
</div>
假设你有这样的Nav
,
<ul class="nav navbar-nav">
<li class="About"> <a href="#About-content"> About </a></li>
<li class="How-it-works"> <a href="#HowItWorks"> How it works </a> </li>
</ul>
假设像你这样的div
,
$(document).ready(function(){
$(".navbar-nav a").on('click', function(event) {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 1000, function(){
window.location.hash = hash;
});
});
})
将动画化到相应的区域。在这里,hash
保存从<a>
标签#
后的值。
恕我直言,最好在.nav
上绑定单击事件,而不是使用单独的<a>
绑定。
好吧,我不知道jquery。 但是你可以通过引导更简单地做到这一点。喜欢这个。它被称为引导滚动间谍。如果您喜欢答案,请评分。:)
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
body {
position: relative;
}
#section1 {padding-top:50px;height:500px;color: #fff; background-color: #1E88E5;}
#section2 {padding-top:50px;height:500px;color: #fff; background-color: #673ab7;}
#section3 {padding-top:50px;height:500px;color: #fff; background-color: #ff9800;}
#section41 {padding-top:50px;height:500px;color: #fff; background-color: #00bcd4;}
#section42 {padding-top:50px;height:500px;color: #fff; background-color: #009688;}
<div class="container-fluid">
<div class="navbar-header">
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
<li><a href="#section3">Section 3</a></li>
<div id="section1" class="container-fluid">
<h1>Section 1</h1>
</div>
<div id="section2" class="container-fluid">
<h1>Section 2</h1>
</div>
<div id="section3" class="container-fluid">
<h1>Section 3</h1>
</div>
相关文章:
- 多个OnClick JQuery事件正在激发
- 如何让两个JS/Jquery插件协同工作
- (多个)jQuery的问题会增加
- javascript类在每次迭代中看到多个DOM?jquery.每个人都很困惑
- 如何将制表符替换为四个空格 jQuery
- 第一个带有 jQuery 的空输入字段
- 动态多个延迟 jQuery Ajax 调用
- 如何处理多个快速 jQuery ajax 提交
- 合并 2 个 javascript/jquery 随机横幅图像/文本函数彼此对应
- 比较两个字符串(jquery .text() 和文字字符串)
- 同一函数中的两个ajax jquery调用
- API 设计:如何组合两个延迟 jQuery 对象的结果
- 添加多个返回jquery
- 结合2个Javascript/Jquery脚本
- 如何组织多个需要jQuery和jQuery扩展的portlet
- 如何显示只有第一个通过jQuery悬停
- 其中两个通过JQuery插件只需要一个输入
- 如何在一个变量内找到多个类?jQuery
- 单击一个元素后选择接下来的两个元素.(jquery)
- 如何结合这两个javascript/jquery脚本