https://github.com/rl-king/elm-scroll-to

Smoothly scroll to an element with a spring animation.
https://github.com/rl-king/elm-scroll-to

animation elm scroll smooth

Last synced: 27 days ago
JSON representation

Smoothly scroll to an element with a spring animation.

• Host: GitHub
• URL: https://github.com/rl-king/elm-scroll-to
• Owner: rl-king
• License: bsd-3-clause
• Created: 2020-03-15T20:48:27.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2023-04-26T06:52:00.000Z (over 1 year ago)
• Last Synced: 2023-08-08T20:39:58.132Z (over 1 year ago)
• Topics: animation, elm, scroll, smooth
• Language: Elm
• Homepage: https://package.elm-lang.org/packages/rl-king/elm-scroll-to/latest/
• Size: 22.5 KB
• Stars: 2
• Watchers: 2
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# elm-scroll-to

Smoothly scroll to an element or position with a [spring](https://en.wikipedia.org/wiki/Hooke's_law) animation.

[example live](https://rl-king.github.io/elm-scroll-to-example/) |

[example code](https://github.com/rl-king/elm-scroll-to/tree/master/example).

## Add to your `Model`

```elm

type alias Model =

    { scrollTo : ScrollTo.State }

init : ( Model, Cmd Msg )

init =

    ( { scrollTo = ScrollTo.init }

    , Cmd.none

    )

```

## Wire `Msg`s

```elm

subscriptions : Model -> Sub Msg

subscriptions model =

    Sub.map ScrollToMsg <|

        ScrollTo.subscriptions model.scrollTo

type Msg

    = ScrollToMsg ScrollTo.Msg

    | ScrollToId String

update : Msg -> Model -> ( Model, Cmd Msg )

update msg model =

    case msg of

        ScrollToMsg scrollToMsg ->

            let

                ( scrollToModel, scrollToCmds ) =

                    ScrollTo.update

                        scrollToMsg

                        model.scrollTo

            in

            ( { model | scrollTo = scrollToModel }

            , Cmd.map ScrollToMsg scrollToCmds

            )

        ScrollToId id ->

            ( model

            , Cmd.map ScrollToMsg <|

                  ScrollTo.scrollTo id

            )

```

## In your view

```elm

div []

    [ button

        [ id "one"

        , onClick (ScrollToId "two")

        , style "display" "block"

        ]

        [ text "Go 👇" ]

    , button

        [ id "two"

        , onClick (ScrollToId "one")

        , style "margin" "2500px 0"

        , style "display" "block"

        ]

        [ text "Go 👆" ]

    ]

```

## Credits

Made with help of [tad-lispy/springs](https://package.elm-lang.org/packages/tad-lispy/springs/latest/)

and ideas from [linuss/smooth-scroll](https://package.elm-lang.org/packages/linuss/smooth-scroll/latest/).