我正在尝试创建一个滚动圆圈来导航我页面的每个部分,如下所示:http://goo.gl/kAhj8J
但是由于某些原因,我不知道如何使用 jQuery 启动它。
这是我的标记:
<section class="background-fixed img-1" >
<div class="main-content">
<h2>Title here</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolor beatae, laudantium eos fugiat, deserunt delectus quibusdam quae placeat, tempora ea? Nulla ducimus, magnam sunt repellendus modi, ad ipsam est.</p>
</div>
</section>
<section class="background-fixed img-2">
<div class="main-content">
<h2>Title here</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolor beatae, laudantium eos fugiat, deserunt delectus quibusdam quae placeat, tempora ea? Nulla ducimus, magnam sunt repellendus modi, ad ipsam est.</p>
</div>
</section>
<section class="background-fixed img-3">
<div class="main-content">
<h2>Title here</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolor beatae, laudantium eos fugiat, deserunt delectus quibusdam quae placeat, tempora ea? Nulla ducimus, magnam sunt repellendus modi, ad ipsam est.</p>
</div>
</section>
<section class="background-fixed img-4">
<div class="main-content">
<h2>Title here</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolor beatae, laudantium eos fugiat, deserunt delectus quibusdam quae placeat, tempora ea? Nulla ducimus, magnam sunt repellendus modi, ad ipsam est.</p>
</div>
这是 JSFIDDLE:https://jsfiddle.net/prjo2ggv/1/
有什么想法吗?
最佳答案
基本上,创建具有固定位置的圈子。在您的 IMG/DIV 标签上,添加一个类“scroll”。然后将 Jquery 库和脚本添加到脚本的 HEAD 部分。
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
jQuery(document).ready(function($) {
$(".scroll").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
});
});
</script>
</head>
<body>
//your circle
<a href="example.com/index.php#page2" class="scroll">link</a>
//the place you want to scroll to
<div id="page2">
//your info
</div>
</body>
</html>
关于jquery - 在右侧滚动圆圈条?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31084375/