R Shiny tabPanel 单击时不会自动到达页面顶部

Question

使用

ui <- navbarPage("mytitle",
           position = "fixed-top",
           tabPanel("tab1", "long pieces of text..."),
           tabPanel("tab2", "long pieces of text..."))

并且每个选项卡都足够长，需要滚动。如何做到这样，当您单击tabs导航栏上的 时，您可以切换选项卡，但也可以返回到页面顶部，而不仅仅是您在上一页上所在的位置？

我想它可能需要一些 javascript 干预，但不知道如何干预。

谢谢您的帮助

编辑 这是一个真实的工作示例

library(shiny)
ui <- navbarPage(
                 title = "TITLE",
                 position = "fixed-top",
                 inverse = TRUE,
                 id = "inTabset",
                 collapsible = TRUE,
                 tabPanel("Tab1", 
                          h1("long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,
long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,
                             ")),
                 tabPanel("Tab2", 
                          h1("long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,
                          long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,
                             "))

                 )

server <- function(input, output, session){}

shinyApp(ui = ui, server = server)

Answer 1

我添加了一个简单的 js 代码，以便当您切换选项卡时您可以返回到页面顶部。

添加的 js 代码如下，它告诉您在观察到选项卡的单击事件时滚动到页面顶部。

$(document).ready(function () {
         $('#inTabset a[data-toggle=\"tab\"]').bind('click', function (e) {
               $(document).load().scrollTop(0);
               });
               
               });

在你的代码中它看起来像这样：

 library(shiny)
 
 ui <- navbarPage(
   title = "TITLE",
   position = "fixed-top",
   inverse = TRUE,
   id = "inTabset",
   collapsible = TRUE,
   tabPanel("Tab1", 
            h1("long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,
               long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,
               ")),
   tabPanel("Tab2", 
            h1("long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,
               long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,long pieces of text,
               ")),
   tags$script(" $(document).ready(function () {
         $('#inTabset a[data-toggle=\"tab\"]').bind('click', function (e) {
               $(document).load().scrollTop(0);
               });
               
               });")
   
            )
 
 server <- function(input, output, session){}
 
 shinyApp(ui = ui, server = server)

希望能帮助到你！

[编辑]： 看起来，在闪亮的新版本发布后，上面的 js 代码停止工作。将上面的 js 代码替换为以下代码应该可以工作：

  tags$script(" $(document).ready(function () {
         $('#inTabset a[data-toggle=\"tab\"]').on('click', function (e) {
          window.scrollTo(0, 0)
               });

               });")