我正在构建一个包含 3 个部分的登陆页面。每个部分都是一个完整的页面部分(浏览器的 width:100%;
x height:100%
)div 及其自己的 ID。我在每个目标中都有一个目标,当按下时, scrollTo
是正确的部分。
<div class="page-section clear" id="Welcome">
<div class="wrapper clear">
<a href="#we-are-the-leader" class="downW">
<i class="fa fa-angle-down"></i>
</a>
</div>
</div>
<div class="page-section clear" id="we-are-the-leader">
<div class="wrapper clear">
<a href="#Services" class="downW">
<i class="fa fa-angle-down"></i>
</a>
</div>
</div>
<div class="page-section clear" id="Services">
<div class="wrapper clear">
<a href="#Services" class="downW">
<i class="fa fa-angle-down"></i>
</a>
</div>
</div>
<script>
jQuery(function($) {
$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
var navBarHeight = 0; // change if nav bar height changes
$('html, body').stop().animate({
'scrollTop': ($target.offset().top - navBarHeight)
}, 1000, 'easeInOutQuint', function () {
window.location.hash = target;
});
});
});
});
</script>
这对我来说非常有效,但现在我想添加三个 css“按钮”,当选择与它们关联的部分时,这些按钮具有特定的颜色。我知道它将利用与我已经实现的相同的概念,但我正在学习 jQuery,并且不确定与现有 scroll
函数相关的最佳方法。
最佳答案
更改动画回调中按钮的 css 类:
jQuery(function($) {
$(document).ready(function(){
var buttons = $('a[href^="#"]');
var clearAllSelected = function () {
$.each(buttons, function () {
$(this).removeClass('.selected-class').addClass('.unselected-class');
});
};
buttons.on('click',function (e) {
clearAllSelected ();
var button = $(this);
e.preventDefault();
var target = this.hash,
$target = $(target);
var navBarHeight = 0; // change if nav bar height changes
$('html, body').stop().animate({
'scrollTop': ($target.offset().top - navBarHeight)
}, 1000, 'easeInOutQuint', function () {
window.location.hash = target;
button.removeClass('.unselected-class')
.addClass('.selected-class');
});
});
});
});
关于jquery - 使用 css/jquery 创建选定的滚动按钮。,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31281082/