{"id":15025187,"url":"https://github.com/bartholomej/material-scrolltop","last_synced_at":"2025-04-09T21:19:16.672Z","repository":{"id":30647633,"uuid":"34203225","full_name":"bartholomej/material-scrolltop","owner":"bartholomej","description":"Lightweight, Material Design inspired plugin for scrolling on top of the html page (with jQuery or TypeScript)","archived":false,"fork":false,"pushed_at":"2022-12-10T13:52:02.000Z","size":1065,"stargazers_count":115,"open_issues_count":9,"forks_count":25,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-09T21:19:10.317Z","etag":null,"topics":["back-to-top","back-top","css","jquery","material","material-design","material-scrolltop","sass","scrolltop","svg-icons","typescript"],"latest_commit_sha":null,"homepage":"http://bartholomej.github.io/material-scrolltop/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bartholomej.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":null,"patreon":null,"open_collective":null,"ko_fi":"bartholomej","tidelift":null,"custom":null}},"created_at":"2015-04-19T11:00:01.000Z","updated_at":"2024-12-07T17:58:24.000Z","dependencies_parsed_at":"2022-08-07T15:16:37.906Z","dependency_job_id":null,"html_url":"https://github.com/bartholomej/material-scrolltop","commit_stats":null,"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bartholomej%2Fmaterial-scrolltop","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bartholomej%2Fmaterial-scrolltop/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bartholomej%2Fmaterial-scrolltop/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bartholomej%2Fmaterial-scrolltop/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bartholomej","download_url":"https://codeload.github.com/bartholomej/material-scrolltop/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248111973,"owners_count":21049578,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["back-to-top","back-top","css","jquery","material","material-design","material-scrolltop","sass","scrolltop","svg-icons","typescript"],"created_at":"2024-09-24T20:01:41.380Z","updated_at":"2025-04-09T21:19:16.653Z","avatar_url":"https://github.com/bartholomej.png","language":"TypeScript","funding_links":["https://ko-fi.com/bartholomej"],"categories":[],"sub_categories":[],"readme":"[![npm version](https://badge.fury.io/js/material-scrolltop.svg)](https://badge.fury.io/js/material-scrolltop)\n[![stars](https://badgen.net/github/stars/bartholomej/material-scrolltop)](https://github.com/bartholomej/material-scrolltop/)\n[![NPM Downloads](https://img.shields.io/npm/dm/material-scrolltop.svg)](https://www.npmjs.com/material-scrolltop)\n[![Join the chat at https://gitter.im/material-scrolltop/Lobby](https://badges.gitter.im/material-scrolltop/Lobby.svg)](https://gitter.im/material-scrolltop/Lobby?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge)\n![](https://github.com/bartholomej/material-scrolltop/workflows/Build%20\u0026%20Publish/badge.svg)\n[![HitCount](http://hits.dwyl.com/bartholomej/material-scrolltop.svg)](http://hits.dwyl.com/bartholomej/material-scrolltop)\n[![volkswagen status](https://auchenberg.github.io/volkswagen/volkswargen_ci.svg?v=1)](https://github.com/auchenberg/volkswagen)\n\n# Material ScrollTop Button\n\n_[Upgrade instructions 1.x → 2.x](#upgrade-instructions)_\n\nLightweight, **Material Design inspired button for scroll-to-top** of the page (jQuery plugin).\n\nJust hit the button to smoothly scroll back to the top of the page. [Here's the demo.](https://bartholomej.github.io/material-scrolltop/)\n\n- Lightweight\n- Material Design inspired\n- With ripple effect\n- Smoothly animated\n- [Customizable](#customization)\n- With some useful [options](#settings)...\n- jQuery + CSS, (TypeScript + SCSS)\n\n![Demo animation](https://github.com/bartholomej/material-scrollTop/blob/master/demo/images/material-scrolltop-animation.gif?raw=true)\n\n## Demo (example)\n\nWatch this: [https://bartholomej.github.io/material-scrolltop/](https://bartholomej.github.io/material-scrolltop/)\n\n## Install\n\nVia **yarn** or **npm**\n\n```bash\nyarn add material-scrolltop\n```\n\n### Manual install (download)\n\nIf you want the latest stable version, get the [latest release](https://github.com/bartholomej/material-scrollTop/releases/latest) from the releases page and use `dist` folder.\n\n## Usage\n\nInclude the files as shown in the code snippets below and you're done.\n\nNOTE: The only dependency for this plugin to work is **jQuery library** (don't forget!)\n\nIn your `\u003chead\u003e` add:\n\n```html\n\u003c!-- Material ScrollTop stylesheet --\u003e\n\u003clink rel=\"stylesheet\" href=\"dist/material-scrolltop.css\" /\u003e\n\n\u003c!-- material-scrolltop plugin --\u003e\n\u003cscript src=\"dist/material-scrolltop.js\"\u003e\u003c/script\u003e\n```\n\nThen, before your closing `\u003c/body\u003e` tag add:\n\n```html\n\u003c!-- material-scrolltop button --\u003e\n\u003cbutton class=\"material-scrolltop\" type=\"button\"\u003e\u003c/button\u003e\n\n\u003c!-- Initialize material-scrolltop (minimal) --\u003e\n\u003cscript\u003e\n  $('body').materialScrollTop();\n\u003c/script\u003e\n```\n\n## Settings\n\n| Option         | Type       | Default | Description                                                          |\n| -------------- | ---------- | ------- | -------------------------------------------------------------------- |\n| revealElement  | string     | body    | Reveal button when scrolling over specific element                   |\n| revealPosition | string     | top     | Element position for reveal button (`'top'` or `'bottom'`)           |\n| padding        | number     | 0       | Adjusts little ups and downs in scrolling (can be negative number)   |\n| duration       | number     | 600     | Determining how long the animation will run                          |\n| easing         | string     | 'swing' | Indicating which easing function to use for the transition animate() |\n| onScrollEnd    | Function() | false   | A function to call once the animation is complete                    |\n\n### Example (advanced usage)\n\n```javascript\n$('body').materialScrollTop({\n  // Scroll to the top of \u003cbody\u003e element ...\n  padding: 100, // ... and add padding 100px\n  revealElement: 'header', // Reveal button when scrolling over \u003cheader\u003e ...\n  revealPosition: 'bottom', // ... and do it at the end of \u003c/header\u003e element\n  duration: 600, // Animation will run 600 ms\n  easing: 'swing', // Do it with swing animation\n  onScrollEnd: function () {\n    // Give me some log when animation ends\n    console.log('This is the end, my only friend, the end...');\n  },\n});\n```\n\n## Folders\n\n\u003cpre\u003e\nmaterial-scrolltop/\n├── src/\n|   ├── icons/\n│   |   └── top-arrow.svg\n│   ├── material-scrolltop.scss\n│   └── material-scrolltop.ts\n├── dist/\n|   ├── icons/\n│   |   └── top-arrow.svg\n│   ├── material-scrolltop.css\n│   └── material-scrolltop.js\n└── demo/\n    ├── ...\n    └── index.html\n    └── examples/\n\u003c/pre\u003e\n\n### src/ (for development)\n\nTypeScript + SCSS source files\n\n`.ts`, `.scss`\n\n\u003e which are NOT executable in browser\n\n### dist/ (for production)\n\nJavaScript + CSS\n\n\u003e executable in browser and compiled from `src/` folder with command `yarn build`\n\n### demo/ (example page)\n\nIn this folder you can see an example in [real use](https://bartholomej.github.io/material-scrolltop/).\n\n## Customization\n\n### Colors, sizes and stuff\n\nUsing SASS [_(this file in 'src' folder)_](src/material-scrolltop.scss), you can simply edit default styles, colors, position and customize plugin to fit your needs. :thumbsup: (Or just edit directly css stylesheet)\n\nHint: Modify scss file, run `yarn build` and see the demo.\n\n### Icons\n\n#### SVG\n\nYou can change `svg` icon in [`icons/`](src/icons/) directory.\n\n#### Custom text or sign\n\n1.  Turn off svg icon as sass variable: `$mst-icon: false`\n2.  Build your new stylesheet `yarn build` (now without svg icon)\n3.  Put your new sign or text inside html `\u003cspan\u003e` element like this:\n\n```html\n\u003cbutton class=\"material-scrolltop\" type=\"button\"\u003e\n  \u003cspan\u003e↑\u003c/span\u003e\n\u003c/button\u003e\n```\n\n## Dependencies\n\njQuery 1.7+\n\n## Upgrade instructions\n\n**Version 1.x → 2.x**\n\nVersion 2.x.x contains some breaking changes:\n\n- **src/** folder now contains source files `.scss` + `.ts` which are NOT executable in browser.\n- **dist/** folder contains compiled `.css`, `.js`, ... (executable in browser!)\n\n## Old versions\n\nOld version is still available:\n\n- Dev branch: [1.x](https://github.com/bartholomej/material-scrolltop/tree/1.x)\n- npm package: `yarn add material-scrolltop@1-latest`\n\n## Application\n\n- [Drupal module](https://www.drupal.org/project/material_scrolltop)\n\n## License\n\nCopyright \u0026copy; 2015 - 2020 [Lukas Bartak](http://bartweb.cz)\n\nProudly powered by nature 🗻, wind 💨, tea 🍵 and beer 🍺 ;)\n\nAll contents are licensed under the [MIT license].\n\n[mit license]: LICENSE\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbartholomej%2Fmaterial-scrolltop","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbartholomej%2Fmaterial-scrolltop","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbartholomej%2Fmaterial-scrolltop/lists"}