rl-king / elm-scroll-to / ScrollTo

Smoothly scroll to an element or position on the page with a spring animation.

Init


type State

A type containing all information to get us to our destination during an animation.


type alias Settings =
{ strength : Basics.Float
, dampness : Basics.Float 
}

Settings that control how we animate to the element.

init : State

Initial State to store in your Model.

Settings used are:

{ strength = 100
, dampness = 4.5
}

initWithSettings : Settings -> State

Same as init but bring your own Settings.

These settings are handled by tad-lispy/springs so take a look over there on how they interact and play around with the Oscillometer demo to get a visual preview of specific settings.

Update


type Msg

A message type for the State to update.

update : Msg -> State -> ( State, Platform.Cmd.Cmd Msg )

Update the State with messages sent by subscriptions or Browser.Dom viewport information requests.

subscriptions : State -> Platform.Sub.Sub Msg

Sync to the browser refresh rate and make sure our animation runs as smooth as possible.

Scroll to

scrollTo : String -> Platform.Cmd.Cmd Msg

Scroll to element with given String id on the current page.

note: this will only scroll the viewport y-axis to the element y position. Use scrollToCustom if you want more control over this behavior.

scrollToTop : Platform.Cmd.Cmd Msg

Scroll to the top of the page.

note: this will only scroll the viewport y-axis to 0, the x-axis position will remain the same.

cancel : State -> State

Interrupt the current animation.

You can call this if the user scrolls during the animation, interrupting the movement of the page.

isScrolling : State -> Basics.Bool

Check if the scrolling animation is running.

Scroll to custom

scrollToCustom : (Browser.Dom.Viewport -> Browser.Dom.Element -> { from : { x : Basics.Float, y : Basics.Float }, to : { x : Basics.Float, y : Basics.Float } }) -> String -> Platform.Cmd.Cmd Msg

Scroll to element with given String id on the current page with your own calculations on where to start and where to end.

Both Viewport and Element can be found in elm/browser

For example you could define scroll to with offset like:

scrollToWithOffset : Float -> String -> Cmd Msg
scrollToWithOffset offset id =
    let
        f { viewport } { element } =
            { from =
                { x = viewport.x
                , y = viewport.y
                }
            , to =
                { x = viewport.x
                , y = Basics.max 0 (element.y - 100)
                }
            }
    in
    scrollToCustom f id

Or scroll the viewport x-axis to the element x position as well.

scrollToAlt : String -> Cmd Msg
scrollToAlt id =
    let
        f { viewport } { element } =
            { from = { x = viewport.x, y = viewport.y }
            , to = { x = element.x, y = element.y }
            }
    in
    scrollToCustom f id

scrollToCustomNoElement : (Browser.Dom.Viewport -> { from : { x : Basics.Float, y : Basics.Float }, to : { x : Basics.Float, y : Basics.Float } }) -> Platform.Cmd.Cmd Msg

Scroll wherever you like but without an element.

For example scrollToTop is defined like:

scrollToTop : Cmd Msg
scrollToTop =
    let
        f { viewport } =
            { from = { x = viewport.x, y = viewport.y }
            , to = { x = viewport.x, y = 0 }
            }
    in
    scrollToCustomNoElement f