在骨幹視圖的滾動窗口中顯示頁面的頂部

我有一個Backbone視圖頁面（或窗口），其中可能有很長的內容使垂直滾動成爲必需。發生這種情況時，視口自動定位在窗口中間而不是頂部。我希望它在頁面的頂部打開，無論頁面是否有長內容。我嘗試了scrollTo的幾個變種，但似乎沒有任何工作。請注意，我使用Backbone js並使用Coffeescript編寫。那就是：在骨幹視圖的滾動窗口中顯示頁面的頂部

:coffeescript 
    $ -> 
    model = new Backbone.Model 
     forcastTickInterval: #{xx_interval(@type_well.num_rows)} 
     typeWell: #{@type_well.to_json} 
     x_labels: #{price_array} 
     disc_rate_array: #{disc_rate_array} 
     disc_pv10_array: #{disc_pv10_array} 
    view = new VGStream.Views.TypeWells.Show(
     model: model 
    ).render() 
    VGStream.App.router = new VGStream.Routers.Tabs() 
    VGStream.App.currentView = view 
    Backbone.history.start()

的標籤，路由器是相當簡單太：

class VGStream.Routers.Tabs extends Backbone.Router 
    routes: 
    '' : 'index' 
    ':name' : 'viewTab' 

    index: -> 
    firstTab = $('.tab-nav li a').first() 
    firstTab.scrollTop(0) 
    if firstTab 
     @navigate firstTab.attr('href'), 
     trigger: true 

    viewTab: (name) -> 
    selectedTab = $(".tab-nav li a[href='##{name}']").parent() 
    unless selectedTab.hasClass 'active' 
     $('.tab-nav li.active').removeClass 'active' 
     selectedTab.addClass 'active' 
     $('.tab').hide() 
     $(".tab##{name}").show() 
     if VGStream.App.currentView? && VGStream.App.currentView[name]?() 
     VGStream.App.currentView[name]()

有趣的是，當我在下面的命令來打開瀏覽器控制檯，然後輸入：

this.scrollTo（ 0）

窗口正確進入頁面的頂部。

我不知道如何解決這個問題。

在此先感謝您的幫助。

來源

2013-03-25 Bharat

認識到，這是一個老問題，但也許下面是一些使用用戶在搜索舊SO問題，解答他們的編程問題的。

所以，$(document).scrollTop(0);的作品。它也適用於Bootstrap導航欄。但重要的是，當你叫它。你正在操縱DOM，窗口，所以這需要在視圖呈現後發生。查看Backbone.js event after view.render() is finished以查看呈現視圖後如何觸發事件。

我使用的是Backbone.Marionette，因此同時有onRender和onShow事件被自動觸發。這對我很好：

onRender: function(){ 
    $(document).scrollTop(0); 
    }

來源

2015-07-30 09:11:08

你試過

$(document).scrollTop(0);

http://api.jquery.com/scrollTop/

來源

2013-03-25 18:42:52

我做到了。我把它放在上面顯示的代碼中的Backbone.history.start（）行之後。它不起作用。有趣的是，它可以在控制檯上運行。我認爲這與JavaScript的異步性有關。執行此行時，不會呈現我的視圖。如果我可以延遲它，直到視圖呈現與「文檔（或dom）準備好的事件相反，那麼它應該工作。我不知道該怎麼做。 – Bharat 2013-03-25 19:06:37

也遇到了這個問題 - 做了一個很好的解決方案嗎？ – MBHNYC 2013-04-02 03:44:04

在骨幹視圖的滾動窗口中顯示頁面的頂部

回答

相關問題