JQuery 动画使页面跳转到顶部

Question

我找到了一些脚本，可以让 div loginform 从背面边缘滑入，然后通过不同的点击从 loginshow 和 loginhide。还有一些脚本可以让 topbar（包含 'show' 按钮）和 loginform 在我向下滚动页面时向下滚动。

我的意图是 loginform 可以在任何地方隐藏和显示，因此您不必滚动到页面顶部即可访问 div 上的 fields/elements .

但是，每当我单击 loginshow 或 loginhide 时，页面会随着 loginform 动画的运行而跳回顶部。

这是脚本

var main = function() {
$('#loginshow').click(function(){
    $('#topbar').animate({
        left: '245px'
    }, 200);
    $('#loginform').delay(100).animate({
        left: '0px'
    }, 200);    
    $('#loginhide').delay(200).animate({
        left: '0px'
    }, 100);
});
$('#loginhide').click(function(){
    $('#loginhide').animate({
        left: '-80px'
    }, 200)
    $('#loginform').delay(200).animate({
        left: '-240px'
    }, 200)
    $('#topbar').delay(300).animate({
        left: '5px'
    }, 200);
})
$(window).on('scroll', function () {
    var scrollPos = $(document).scrollTop();
    $('#loginform').css({
        top: scrollPos
    });
    $('#topbar').css({
        top: scrollPos
    });
}).scroll();
};
$(document).ready(main);

如何停止loginshow和loginhide函数使页面跳回？感谢您的帮助，我昨天才开始使用 javascript。

Answer 1

您尝试过使用 jQuery preventDefault() 吗？

    $('#loginshow').click(function(event){
        event.preventDefault();
// Your code here
    });

JQuery 动画使页面跳转到顶部

JQuery animation makes page jump to top

javascript

jquery

html

jquery-animate