R 滚动至导航栏页面的底部

假设我有一个下面闪亮的应用程序-

现在我想当用户第一次单击第二个选项卡时，应用程序应该自动向下滚动到容器页面和div的底部。我想进行一些平滑的滚动

有没有办法做到这一点

任何指针都将受到高度赞赏

根据@dcruvolo关于添加数据名的建议，我修改了应用程序-

---

很遗憾，滚动效果不可见。

您可以通过创建事件侦听器滚动到页面底部，该侦听器在单击选项卡2时运行。选择所需的元素并提取scrollHeight属性的值，然后将其传递到jquery的scrollTop中。我已将其附加到document.body，但您可以用它替换您喜欢的任何元素

下面是使用点击事件的示例应用程序。我使用标记$script添加了它。要将事件附加到另一个选项卡，请用所需选项卡的名称替换数据值

有光泽的图书馆

---

谢谢。每次用户单击第二个选项卡时，此操作都会运行。然而，我打算让它只为第一次点击。有没有办法添加会话信息来实现这一点？请参阅更新的代码。我重组了点击事件。它现在使用绑定和取消绑定。我不确定开/关是否是更好的方法。我已经有一段时间没有使用jQuery了。谢谢。是否可以通过tabName=Tab2而不是data value=Tab2来调用此JS？对我来说，用tabName调用会更合适。我尝试使用[data name=\Tab2\]，但它不起作用。没有自动生成的数据名属性。默认情况下，shiny使用tabPaneltitle=“data value”、….中的值生成属性数据值。。。。通过将data name=“Tab2”添加到tabPanel函数中，您可以将自定义数据属性添加到选项卡面板中。请确保数据名称用反勾号包装。我还没有测试它，但它可以工作。没有自动生成的数据名属性。默认情况下，shiny使用tabPaneltitle=“data value”、….中的值生成属性数据值。。。。通过将data name=“Tab2”添加到tabPanel函数中，您可以将自定义数据属性添加到选项卡面板中。请确保数据名称用反勾号包装。我还没有测试过，但它可以工作。

library(markdown)

ui =
shinyUI(
  navbarPage(id = "Navbar", "Navbar",
                tabPanel(tabName = "Tab1", "Tab1", 
                          div(style = "height: 2000px; width: 1500px; margin: 0; padding: 0; overflow-y: scroll;",
                                                div(style = "height: 3000px; width: 50%; margin: 0; padding: 0;",
                                                    HTML("A")))),
                tabPanel(tabName = "Tab2", "Tab2",
                          div(style = "height: 2000px; width: 1100px; margin: 0; padding: 0; overflow-y: scroll;",
                                                div(style = "height: 3000px; width: 50%; margin: 0; padding: 0;",
                                                    HTML("B"))))
              )
)

server =
function(input, output, session) {

}

shinyApp(ui = ui, server = server)

library(shiny)
ui <- tagList(
    navbarPage(
        id = "Navbar", "Navbar",
        tabPanel(
            tabName = "Tab1", "Tab1",
            div(
                style = "height: 2000px; width: 1500px; margin: 0; padding: 0; overflow-y: scroll;",
                div(
                    style = "height: 3000px; width: 50%; margin: 0; padding: 0;",
                    HTML("A")
                )
            )
        ),
        tabPanel(
            tabName = "Tab2", `data-name` = "Tab2", "Tab2",
            div(
                style = "height: 2000px; width: 1100px; margin: 0; padding: 0; overflow-y: scroll;",
                div(
                    style = "height: 3000px; width: 50%; margin: 0; padding: 0;",
                    HTML("B")
                )
            )
        )
    ),
    tags$script(
        "
        // select desired tab link
        $('a[data-name=\"Tab2\"]').bind('click', function(event) {

            // scroll to bottom of page
            $('html, body').animate({
                scrollTop: document.body.scrollHeight
            }, 500);

            // remove
            $(this).unbind('click');
        })
        "
    )
)

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

shinyApp(ui = ui, server = server)