【问题标题】:Laravel - maintain scroll position on postLaravel - 在帖子上保持滚动位置
【发布时间】:2014-11-24 20:14:48
【问题描述】:

我的 Laravel 应用中有简单的评论系统。问题是当有人提交评论页面时,页面顶部会重新加载。我希望该页面在原始评论的同一位置返回用户(保持滚动位置)。

这是负责 cmets 的视图的一部分:

@if ($signedIn)

    {{ Form::open(['route' => ['comment_path', $status->id], 'class' => 'comments__create-form',]) }}
    {{ Form::hidden('status_id', $status->id) }}

<div class="form-group">

    {{ Form::textarea('body', null, ['class' => 'form-control', 'rows' => 1]) }}

</div>

    {{ Form::close() }}

@endif

@unless ($status->comments->isEmpty())

<div class="comments">

@foreach ($status->comments as $comment)

@include ('statuses.partials.comment')

@endforeach

</div>

@endunless

这是一个 jquery 脚本,当有人点击 ENTER 时提交评论

<script>

$('#flash-overlay-modal').modal();

$('.comments__create-form').on('keydown', function(e) {

    if (e.keyCode == 13) {

        e.preventDefault();
        $(this).submit();
    }

});

</script>

感谢您的帮助!

【问题讨论】:

    标签: javascript php jquery laravel


    【解决方案1】:

    好的,我可能尝试了所有可用的解决方案,但当您像我一样在页面上有很多表单时,它们都不能完美运行。

    感谢 Evalds Urtan,我解决了这个问题。 Evalds 有最好和最短的脚本来保持滚动位置。

    而且你不需要做任何事情,只需包括他的jquery

    /*
    * Maintain / Keep scroll position after post-back / postback / refresh. Just include plugin (no need for cookies)
    *
    * Author: Evalds Urtans
    * Website: http://www.evalds.lv
    */
    (function($){
    window.onbeforeunload = function(e){    
    window.name += ' [' + $(window).scrollTop().toString() + '[' + $(window).scrollLeft().toString();
    };
    $.maintainscroll = function() {
    if(window.name.indexOf('[') > 0)
    {
    var parts = window.name.split('['); 
    window.name = $.trim(parts[0]);
    window.scrollTo(parseInt(parts[parts.length - 1]), parseInt(parts[parts.length - 2]));
    }   
    };  
    $.maintainscroll();
    })(jQuery);
    

    感谢 Evalds!

    【讨论】:

    • 即使您访问网站上的不同页面,上面的代码也会保持滚动位置。您可以通过更改 window.name += ' [' + location.pathname + '[' + $(window).scrollTop().toString() + '[' + $(window).scrollLeft().toString();if( parts[parts.length - 3] == location.pathname ){ window.scrollTo(parseInt(parts[parts.length - 1]), parseInt(parts[parts.length - 2])); } 来解决此问题
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2011-03-22
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-07-15
    相关资源
    最近更新 更多