Question

我正在尝试使用scrolltop方法，而event.preventDefault无法正常工作。我所经历的是页面首先向上滚动然后向下滚动。似乎onclick导致页面重新提交或者某事......（ajax post ??）

我有以下代码

按钮（触发器）

 <a id="nextset" class='nextbtn' >Next Step</a>

事件

jQuery('#nextset').click(function (event) {
                event.preventDefault();
                movenext('set');
                jQuery('html,body').animate({ scrollTop: $('#subtitles').offset().top }, 2000);
            });

功能

    function getfav(obj) {
            var myParams = "{ 'proattr':'" + obj + "'}";
            jQuery.ajax({
                type: "POST",
                url: "project.aspx/getproject",
                data: myParams,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                beforeSend: function () { jQuery('#wait').show(); },
                complete: function () { jQuery('#wait').hide(); },
                success: function (msg) {
                    GetProjectPic(msg.d, obj); //creates DOM and insert in div
                    Initbtns();// dynamic btns initialization
                }
            });
        }

  function movenext(obj) {
            //other codes to hide/show DOM
            getfav(nextobj); 
        }

如果我添加回程faulse;在onclick事件中，该按钮不起作用。

知道是什么导致滚动到顶部吗？

更新

它是由movenext函数内的代码块引起的。

jQuery('[id^="favdiv"]').empty();

与event.preventDefault无关。

奇怪的是，屏幕滚动远远超过隐藏的div高度（“favdiv”），这会导致屏幕效果上下。我不确定如何防止它...

UPDATE2

我搜索了jquery empty方法，发现了这个。

jquery "empty" changes the scrollbar

Answer 1

您可以使用以下代码段来避免默认行为：

<a id="nextset" class="nextbtn" href="javascript:void(0);">Next Step</a>

Answer 2

您是否有机会在点击事件结束时尝试“返回false”？

jQuery('#nextset').click(function (event) {
            movenext('set');
            jQuery('html,body').animate({ scrollTop: $('#subtitles').offset().top }, 2000);
            event.preventDefault();
            return false;
        });

Answer 3

我最终写了这样的东西。它仍然有点上升，但至少页面没有跳

 jQuery('#favdiv' + obj).fadeOut('fast', function () { 
     jQuery('#favdiv' + obj).remove(); 
 });
 setTimeout(function () {
     jQuery('html,body').animate({ scrollTop: $('#subtitles').offset().top }, 1500);
 }, 500);

event.preventDefault不起作用。 Ajax调用导致这个？

3 个答案: