scroller

Scroll to any object in your Shiny apps

The package scroller allows to scroll to any element on the page in Shiny thanks to Arbitrary anchor JS.

Installation

Install the package from Github.

# install.packages("remotes")
remotes::install_github("lgnbhl/scroller")

Shiny

In order to use scroller, you must first call use_scroller() in the apps’ UI.

Then you can add a CSS selector after the hash (#) and it will automatically be scrolled to. If the selector returns more than 1 element, the first element found will be scrolled to. More information here.

library(shiny)
library(ggplot2)
library(scroller)

shinyApp(
  ui = fluidPage(
      align = "center",
      scroller::use_scroller(), # add use_scroller() in the UI
      h1("Shiny with scroller"),
      a("Direct to plot", type = "button", class = "btn btn-info", href = "#plot"), #plot
      a("Scroll to plot", type = "button", class = "btn btn-danger", href = "##plot"), ##plot
      HTML(rep("<br/><br/><br/>&darr;<br/>", 10)),
      plotOutput("plot"),
      a("Scroll to top", type = "button", class = "btn btn-danger", href = "#.btn") #.btn
    ),
  
  server = function(input, output, session){
    output$plot <- renderPlot({
      ggplot(mpg, aes(displ, hwy, colour = class)) + 
        geom_point()
    })
  }
)

Customize it

You can change the animation lenght, the easing function (see jquery-easing for all options availables) and the scroll off set.

scroller::use_scroller(
  animationLength = 1500, 
  easingFunction = "easeOutCirc",
  scrollOffset = 30
  )