如何通过点击按钮自动向下滚动模式?
问题描述:
我在页面上有一个按钮,点击它时,向下滚动,如果我点击页面底部,它会向上滚动。如何通过点击按钮自动向下滚动模式?
<style>
.scroll_button {
position: fixed;
right: 35px;
z-index: 100;
}
</style>
<div class="scroll_button" style="bottom: 10px;">
<button id="scroll_id" class="btn btn-primary">
<span> Click to Scroll</span><br><i id="scroll_icon" class="fa fa-chevron-circle-down"></i>
</button>
</div>
<script>
//scroll up and down
$(function() {
$('#scroll_id').click(function (e) {
e.preventDefault();
var $win = $(window);
var scrollTarget = $win.height() + $win.scrollTop() + 1 >= $(document).height() ? 0 : $win.scrollTop() + $win.height()
$("html, body, .modal").animate({
scrollTop: scrollTarget
}, 600);
});
});
</script>
我在这个页面有一个模式,我想要有相同的按钮滚动模式的内容,当点击该按钮。
所以,我复制的HTML代码的按钮,并把它的模式的身体,但该模式背后的页面进行模态窗口滚动没有。
我已经将.modal
类添加到脚本中的选择器,以便模式将被滚动(我发现在一些帖子上*),但似乎不工作。
我错过代码中的东西吗? 我应该如何继续?由于
答
当您复制和粘贴,你也复制了ID scroll_icon
的代码。 Id是唯一标识符,可让您使用CSS或JavaScript来定位特定的DOM元素。您需要更改模式上的ID和与其相关的代码。
答
$(document).ready(function (e){
$(function() {
$(document).on('click','.scroll_id',function (e) {
e.preventDefault();
var $win = $(window);
var scrollTarget = $win.height() + $win.scrollTop() + 1 >= $(document).height() ? 0 : $win.scrollTop() + $win.height();
if($(this).parent('.modal').length) {
var $scrCont = $(".modal")
}
else {
var $scrCont = $("html, body");
}
$($scrCont).animate({
scrollTop: scrollTarget
}, 600);
});
});
});
您可以识别按钮的父级并为正确的组件设置动画。
如果我理解你的问题正确 - https://jsfiddle.net/oerhbwr4/6/
+0
谢谢..但我不知道为什么它不适合我:/ 顺便说一句,为什么模式中的滚动按钮也在小提琴中滚动? –
所以,你要自动滚动上点击的模式和点击不启用滚动?这是两件不同的事情。 –
对不起,我看不到你的意思,但我的意思是,当点击模式中的按钮时,它会向下滚动(如果达到模式的底部,则点击按钮将滚动到顶部) –