jQuery动画使页面跳至顶部 [英] JQuery animation makes page jump to top

问题描述

我找到了一些脚本，可以使div loginform从背面的边缘滑入，然后通过不同的单击，将loginshow和loginhide滑出.还有一些脚本，当我向下滚动页面时，使topbar(包含显示"按钮)和loginform向下滚动.

I found a bit of script to make a div loginform slide in from the edge of the back, and back out, on different clicks, of loginshow and loginhide. Also a bit of script to make topbar (containing the 'show' button) and loginform to scroll down when I scroll down the page.

我的意图是要在任意位置隐藏和显示loginform，因此您无需滚动到页面顶部即可访问该div上的字段/元素.

My intent is for loginform to be hidden and shown from anywhere, so you do not have to scroll to the top of the page to access the fields/elements on that div.

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

However whenever I click loginshow or loginhide, the page jumps back to the top as the loginform animation runs.

这是脚本

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.

How can I stop the loginshow and loginhide functions make the page jump back up? Thanks for any help, I have only just started with javascript yesterday.

推荐答案

您尝试使用jQuery preventDefault( )?

Did you tried using jQuery preventDefault()?

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

这篇关于jQuery动画使页面跳至顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！