+
+
+
+
+
+
+
diff --git a/website_scroll_buttons/static/src/css/scroll_button.css b/website_scroll_buttons/static/src/css/scroll_button.css
new file mode 100644
index 000000000..1a61709c9
--- /dev/null
+++ b/website_scroll_buttons/static/src/css/scroll_button.css
@@ -0,0 +1,72 @@
+.scroll_to_top{
+ float: right;
+ border-radius: 50%;
+ background-color: #71639e;
+ color: white;
+ border: none;
+ padding: 5px;
+ font-size: 21px;
+ height: 50px;
+ width: 50px;
+ box-shadow: 0 2px 4px darkslategray;
+ cursor: pointer;
+ transition: all 0.2s ease;
+}
+.scroll_icon {
+ position: fixed;
+ bottom: 30px;
+ right: 20px;
+ z-index: 9999;
+ display: none;
+}
+.scroll_to_bottom{
+ float: right;
+ border-radius: 50%;
+ background-color: #71639e;
+ color: white;
+ border: none;
+ padding: 5px;
+ font-size: 21px;
+ height: 50px;
+ width: 50px;
+ box-shadow: 0 2px 4px darkslategray;
+ cursor: pointer;
+ transition: all 0.2s ease;
+}
+.scroll_icon_bottom {
+ position: fixed;
+ top: 30px;
+ right: 20px;
+ z-index: 9999;
+ display: none;
+}
+.scroll_to_bottom:hover, .scroll_to_top:hover {
+ box-shadow: 0 0 0 0.5rem rgba(25, 135, 84, 0.25);
+}
+
+@media (min-height: 70rem) {
+ .scroll_icon_bottom {
+ display: none;
+ }
+}
+@media (max-height: 75rem) {
+ .scroll_icon_bottom {
+ display: block;
+ }
+}
+
+@media (min-height: 70rem) {
+ .scroll_icon {
+ display: none;
+ }
+}
+@media (max-height: 75rem) {
+ .scroll_icon {
+ display: block;
+ }
+}
+@media (max-width:90px){
+ .scroll_icon_bottom, .scroll_icon{
+ display:none !important;
+ }
+}
diff --git a/website_scroll_buttons/static/src/js/scroll_button.js b/website_scroll_buttons/static/src/js/scroll_button.js
new file mode 100644
index 000000000..7749a7f5e
--- /dev/null
+++ b/website_scroll_buttons/static/src/js/scroll_button.js
@@ -0,0 +1,33 @@
+/** @odoo-module **/
+import publicWidget from "@web/legacy/js/public/public_widget";
+publicWidget.registry.Scroll_button = publicWidget.Widget.extend({
+ selector: '.website_scroll_buttons',
+ events: {
+ 'click .scroll_to_bottom': '_onClickScrollBottom',
+ 'click .scroll_to_top': '_onClickScrollTop'
+ },
+ start(){
+ const $wrapwrap = this.$target.closest('#wrapwrap');
+ if ($wrapwrap[0].scrollHeight > window.innerHeight) {
+ const self = this;
+ $wrapwrap.scroll(function () {
+ if ($(this).scrollTop() > window.innerHeight * 0.1) {
+ self.$el.find(".scroll_icon_bottom").show();
+ self.$el.find(".scroll_icon").show();
+ }
+ });
+ }
+ },
+ /*Click on button, it move to bottom of the screen*/
+ _onClickScrollBottom(){
+ this.$target.closest('body').animate({
+ scrollTop: this.$target.closest(document).height()*10
+ }, 2000);
+ },
+ /*Click on button, it move to top screen*/
+ _onClickScrollTop(){
+ this.$target.closest('body').animate({
+ scrollTop: 0
+ }, 400);
+ },
+})
diff --git a/website_scroll_buttons/views/website_scroll_buttons_templates.xml b/website_scroll_buttons/views/website_scroll_buttons_templates.xml
new file mode 100644
index 000000000..58b79c330
--- /dev/null
+++ b/website_scroll_buttons/views/website_scroll_buttons_templates.xml
@@ -0,0 +1,22 @@
+
+
+
+
+
+
+
+
+
+ Community
+
+
+ Enterprise
+
+
+ Odoo.sh
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + This App Allows to Add Scroll Buttons in Website Module. +
+Scroll Button In Website +
+
+ 
+
+
+
+
+ 
+ Email Us
+
+
+ 
+ Skype Us
+
+
+
+ Email Us
+
+
+
+ Skype Us
+
+
+ 
+
+
+
+ 
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+ Key + Highlights
+
+
+
+
+
+ 
+
+
+ + Easy to Move +
++ Publish + Using buttons, you may easily navigate from top + to bottom and vice versa.
+
+
+
+
+
+
+
+
+ + Available in Community, Enterprise +
+
+
+
+
+
+
+
+
+
+ Scroll Button In Website
+
+ Are you ready to make your business more
+ organized?
+
+
+
+
+ Are you ready to make your business more
+ organized?
+
Improve now!
+
+
+ 
+ 
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ 
+
+
+
+
+
+
+
+
+ + Click Button To Move From Top to Bottom + +
+
+
+ + New buttons added for easily move to bottom + of screen. Just move the scrollbar the down + arrow button will show, if click on that + move to bottom. +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+ + Click Button To Move From Bottom to Top + +
+
+
+ + The up arrow button will show now, and click + on that the screen will move to the + top. +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Scroll Button + In Website
+
+
+
+ + This module helps to add scroll buttons + in website for easily move from top to + bottom and bottom to top. +
+
+
+
+
+
+
+
+ + Latest Release 18.0.1.0.0 +
+ + 5th July, 2025 + +
+
+
+
+
+
+
+ Add
+
+
+
+ -
+
- + Initial Commit + + +
+
+ + Related Products +
+ +
+ 
+ 
+ 
+ 
+ 
+ + Our Services
+
+
+
+
+
+
+
+
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+
+
+
+
+ ....
+
+