# streamlit-scroll-to-top
Streamlit component which provides a hacky workaround to utilise streamlit buttons, iframes and state management to redirect users to different points on a page.
[](https://scroll-to-top-demo.streamlit.app/)
<a href="https://buymeacoffee.com/bowespublishing" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" height="50" width="180"></a>
## How does it work?
The component works by creaing an invisible iframe in the location you want to scroll to and then tells the parent window to move the focus to that iframe. See the Example usage further below to get a further idea of how it works/how to implement it in your code. There are other ways to do this however I wanted a way I could easily use streamlit buttons & the session state to move the user to different locations.
This may stop working at any moment or indeed may not work on some browsers. I've tested on Edge, Chrome, Firefox & Opera and all appears to be OK
## Features
- Scroll to the top of a page (or any point) easily using existing Streamlit buttons.
## Installation
```shell script
pip install streamlit-scroll-to-top
```
## Example Usage
Copy this code snippet:
```python
import streamlit as st
from streamlit_scroll_to_top import scroll_to_here
# Step 1: Initialize scroll state in session_state
if 'scroll_to_top' not in st.session_state:
st.session_state.scroll_to_top = False
if 'scroll_to_header' not in st.session_state:
st.session_state.scroll_to_header = False
# Step 2: Handle the scroll-to-top action
if st.session_state.scroll_to_top:
scroll_to_here(0, key='top') # Scroll to the top of the page
st.session_state.scroll_to_top = False # Reset the state after scrolling
# Step 3: Define a scroll function to trigger the state change
def scroll():
st.session_state.scroll_to_top = True
def scrollheader():
st.session_state.scroll_to_header = True
# Step 4: Add some dummy content to simulate a long page
st.title("Dummy Content")
st.write("Scroll down to see the 'Scroll to Top' button.")
for i in range(50): # Generate dummy content
if i == 25:
if st.session_state.scroll_to_header:
scroll_to_here(0, key='header') # Scroll to the top of the page
st.session_state.scroll_to_header = False # Reset the state after scrolling
st.header("Or scroll here")
st.text(f"Line {i + 1}: This is some dummy content.")
# Step 5: Add a button to trigger the scroll to top action. Both ways work... personal preference
st.button("Scroll to Top", on_click=scroll)
if st.button("Scroll to Top 2"):
st.session_state.scroll_to_top = True
st.rerun()
# Step 5: Add a button to trigger the scroll to header action. Both ways work... personal preference
st.button("Scroll to Header", on_click=scrollheader)
if st.button("Scroll to Header 2"):
st.session_state.scroll_to_header = True
st.rerun()
```
Raw data
{
"_id": null,
"home_page": "https://github.com/bowespublishing/streamlit-scroll-to-top",
"name": "streamlit-scroll-to-top",
"maintainer": null,
"docs_url": null,
"requires_python": ">=3.6",
"maintainer_email": null,
"keywords": null,
"author": "Bowes Publishing",
"author_email": "bowespublishing@gmail.com",
"download_url": "https://files.pythonhosted.org/packages/d2/06/26f13270ea77f0fddec15b11955dad1c1130897c87f6a4c3040221051ef7/streamlit_scroll_to_top-0.0.4.tar.gz",
"platform": null,
"description": "# streamlit-scroll-to-top\r\nStreamlit component which provides a hacky workaround to utilise streamlit buttons, iframes and state management to redirect users to different points on a page.\r\n\r\n[](https://scroll-to-top-demo.streamlit.app/)\r\n\r\n<a href=\"https://buymeacoffee.com/bowespublishing\" target=\"_blank\"><img src=\"https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png\" alt=\"Buy Me A Coffee\" height=\"50\" width=\"180\"></a>\r\n\r\n\r\n\r\n## How does it work?\r\n\r\nThe component works by creaing an invisible iframe in the location you want to scroll to and then tells the parent window to move the focus to that iframe. See the Example usage further below to get a further idea of how it works/how to implement it in your code. There are other ways to do this however I wanted a way I could easily use streamlit buttons & the session state to move the user to different locations.\r\n\r\nThis may stop working at any moment or indeed may not work on some browsers. I've tested on Edge, Chrome, Firefox & Opera and all appears to be OK\r\n\r\n## Features\r\n\r\n- Scroll to the top of a page (or any point) easily using existing Streamlit buttons.\r\n\r\n## Installation\r\n\r\n```shell script\r\npip install streamlit-scroll-to-top\r\n```\r\n\r\n## Example Usage\r\n\r\nCopy this code snippet:\r\n\r\n```python\r\nimport streamlit as st\r\nfrom streamlit_scroll_to_top import scroll_to_here\r\n\r\n# Step 1: Initialize scroll state in session_state\r\nif 'scroll_to_top' not in st.session_state:\r\n st.session_state.scroll_to_top = False\r\n \r\nif 'scroll_to_header' not in st.session_state:\r\n st.session_state.scroll_to_header = False\r\n\r\n# Step 2: Handle the scroll-to-top action\r\nif st.session_state.scroll_to_top:\r\n scroll_to_here(0, key='top') # Scroll to the top of the page\r\n st.session_state.scroll_to_top = False # Reset the state after scrolling\r\n\r\n# Step 3: Define a scroll function to trigger the state change\r\ndef scroll():\r\n st.session_state.scroll_to_top = True\r\n \r\ndef scrollheader():\r\n st.session_state.scroll_to_header = True\r\n\r\n# Step 4: Add some dummy content to simulate a long page\r\nst.title(\"Dummy Content\")\r\nst.write(\"Scroll down to see the 'Scroll to Top' button.\")\r\nfor i in range(50): # Generate dummy content\r\n if i == 25:\r\n if st.session_state.scroll_to_header:\r\n scroll_to_here(0, key='header') # Scroll to the top of the page\r\n st.session_state.scroll_to_header = False # Reset the state after scrolling\r\n st.header(\"Or scroll here\")\r\n st.text(f\"Line {i + 1}: This is some dummy content.\")\r\n\r\n# Step 5: Add a button to trigger the scroll to top action. Both ways work... personal preference\r\nst.button(\"Scroll to Top\", on_click=scroll)\r\nif st.button(\"Scroll to Top 2\"):\r\n st.session_state.scroll_to_top = True\r\n st.rerun()\r\n \r\n# Step 5: Add a button to trigger the scroll to header action. Both ways work... personal preference \r\nst.button(\"Scroll to Header\", on_click=scrollheader)\r\nif st.button(\"Scroll to Header 2\"):\r\n st.session_state.scroll_to_header = True\r\n st.rerun()\r\n```\r\n",
"bugtrack_url": null,
"license": null,
"summary": "A Streamlit custom component to allow one click scrolling to different locations on your page",
"version": "0.0.4",
"project_urls": {
"Homepage": "https://github.com/bowespublishing/streamlit-scroll-to-top"
},
"split_keywords": [],
"urls": [
{
"comment_text": "",
"digests": {
"blake2b_256": "ce899099f3c5fab4b7ecef73a16bb80a59d6501d5b8ae904df162700460d15e1",
"md5": "2a0c2b3adc219a142eb7d48b10938517",
"sha256": "4e894ee1377fd0d65c799c39463d382d9a72fb9c592dde566ea3f6c109154128"
},
"downloads": -1,
"filename": "streamlit_scroll_to_top-0.0.4-py3-none-any.whl",
"has_sig": false,
"md5_digest": "2a0c2b3adc219a142eb7d48b10938517",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": ">=3.6",
"size": 2273951,
"upload_time": "2024-12-12T00:40:00",
"upload_time_iso_8601": "2024-12-12T00:40:00.918469Z",
"url": "https://files.pythonhosted.org/packages/ce/89/9099f3c5fab4b7ecef73a16bb80a59d6501d5b8ae904df162700460d15e1/streamlit_scroll_to_top-0.0.4-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": "",
"digests": {
"blake2b_256": "d20626f13270ea77f0fddec15b11955dad1c1130897c87f6a4c3040221051ef7",
"md5": "7e9dfcc3913e37f8c9de10c7025e87f3",
"sha256": "148bbaa31ca91444a94d4b1f846bcdc0de5f6b2eccaf9e815805754892a9d7f6"
},
"downloads": -1,
"filename": "streamlit_scroll_to_top-0.0.4.tar.gz",
"has_sig": false,
"md5_digest": "7e9dfcc3913e37f8c9de10c7025e87f3",
"packagetype": "sdist",
"python_version": "source",
"requires_python": ">=3.6",
"size": 402901,
"upload_time": "2024-12-12T00:40:04",
"upload_time_iso_8601": "2024-12-12T00:40:04.916966Z",
"url": "https://files.pythonhosted.org/packages/d2/06/26f13270ea77f0fddec15b11955dad1c1130897c87f6a4c3040221051ef7/streamlit_scroll_to_top-0.0.4.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2024-12-12 00:40:04",
"github": true,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"github_user": "bowespublishing",
"github_project": "streamlit-scroll-to-top",
"travis_ci": false,
"coveralls": false,
"github_actions": false,
"lcname": "streamlit-scroll-to-top"
}
JSON
