+
+
+
+
+
+
+
+ 
+
+
+
+
+
+ Community
+
+
+ Enterprise
+
+
+ Odoo.sh
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
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..3dac737db
--- /dev/null
+++ b/website_scroll_buttons/static/src/js/scroll_button.js
@@ -0,0 +1,40 @@
+odoo.define('website_scroll_buttons.scroll_button', function(require){
+ "use strict"
+ /* In the function check the document height and set the visibility for buttons
+ when the scroll bar move from scrollTop. And add click function for scroll bar
+ move from top to bottom and bottom to top.*/
+ var publicWidget = require('web.public.widget');
+ var core = require('web.core');
+ publicWidget.registry.Template = publicWidget.Widget.extend({
+ selector: '.website_scroll_buttons',
+ events: {
+ 'click .scroll_to_bottom': '_onClickScrollBottom',
+ 'click .scroll_to_top': '_onClickScrollTop'
+ },
+ /*Start function is for check the conditions for showing the buttons.*/
+ start: function() {
+ if (this.$target.closest('#wrapwrap')[0].scrollHeight > window.innerHeight){
+ var self = this
+ this.$target.closest('#wrapwrap').scroll(function() {
+ if (self.$target.closest(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: function(){
+ this.$target.closest('body').animate({
+ scrollTop: this.$target.closest(document).height()*10
+ }, 2000);
+ },
+// /*Click on button, it move to top screen*/
+ _onClickScrollTop: function(){
+ this.$target.closest('body').animate({
+ scrollTop: 0
+ }, 400);
+ },
+ })
+return publicWidget.registry.Template;
+})
diff --git a/website_scroll_buttons/static/src/scss/scroll_button.scss b/website_scroll_buttons/static/src/scss/scroll_button.scss
new file mode 100644
index 000000000..ed99264f6
--- /dev/null
+++ b/website_scroll_buttons/static/src/scss/scroll_button.scss
@@ -0,0 +1,70 @@
+$button-bg-color: #71639e;
+$button-color: white;
+$button-box-shadow: 0 2px 4px darkslategray;
+$button-hover-box-shadow: 0 0 0 0.5rem rgba(25, 135, 84, 0.25);
+$button-size: 50px;
+$button-padding: 5px;
+$font-size: 21px;
+$z-index-value: 9999;
+$bottom-spacing: 30px;
+$right-spacing: 20px;
+
+.scroll_to_top,
+.scroll_to_bottom {
+ float: right;
+ border-radius: 50%;
+ background-color: $button-bg-color;
+ color: $button-color;
+ border: none;
+ padding: $button-padding;
+ font-size: $font-size;
+ height: $button-size;
+ width: $button-size;
+ box-shadow: $button-box-shadow;
+ cursor: pointer;
+ transition: all 0.2s ease;
+
+ &:hover {
+ box-shadow: $button-hover-box-shadow;
+ }
+}
+
+.scroll_icon {
+ position: fixed;
+ bottom: $bottom-spacing;
+ right: $right-spacing;
+ z-index: $z-index-value;
+ display: none;
+
+ @media (min-height: 30rem) {
+ display: none;
+ }
+
+ @media (max-height: 35rem) {
+ display: block;
+ }
+
+ @media (max-width: 800px) {
+ display: none !important;
+ }
+}
+
+.scroll_icon_bottom {
+ position: fixed;
+ top: $bottom-spacing;
+ right: $right-spacing;
+ z-index: $z-index-value;
+ display: none;
+
+ @media (min-height: 30rem) {
+ display: none;
+ }
+
+ @media (max-height: 35rem) {
+ display: block;
+ }
+
+ @media (max-width: 800px) {
+ display: none !important;
+ }
+}
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..67578fcf3
--- /dev/null
+++ b/website_scroll_buttons/views/website_scroll_buttons_templates.xml
@@ -0,0 +1,22 @@
+
+
+
+
+
+ 
+
+ + Scroll Button In Website
++ This App Allows to Add Scroll Buttons in Website Module. +
+
+
+
+
+
+
+ + Explore this module +
+ +
+
+
+
+
+ + Overview +
+
+
+
+ + This module helps to add scroll buttons in website for easily move from top to bottom and bottom to top. +
+
+
+
+
+ + Features +
+
+
+
+ 
+
+
+
+
+ + It will support on Community, Enterprise & Odoo.sh
+
+
+
+
+
+
+
+
+ + Using buttons, you may easily navigate from top to bottom and vice versa.
+
+
+
+
+
+ + Screenshots +
+
+ 
+
+
+ + 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.
+
+
+
+
+
+
+
+ 
+ 
+ 
+ 
+ 
+ 
+
+
+
+
+
+
+ Our Services
++
+
+
+
+ 
+
+
+ + Odoo + Customization
+
+
+
+
+ 
+
+
+ + Odoo + Implementation
+
+
+
+
+
+ 
+
+
+ + Odoo + Support
+
+
+
+
+ 
+
+
+ + Hire + Odoo + Developer
+
+
+
+
+ 
+
+
+ + Odoo + Integration
+
+
+
+
+
+ 
+
+
+ + Odoo + Migration
+
+
+
+
+ 
+
+
+ + Odoo + Consultancy
+
+
+
+
+ 
+
+
+ + Odoo + Implementation
+
+
+
+ 
+
+
+ + Odoo + Licensing Consultancy
+
+
+
+
+
+
+ Our Industries
++
+
+
+
+ 
+
+
+ + Trading +
++ Easily procure + and + sell your products
+
+
+
+
+ 
+
+
+ + POS +
++ Easy + configuration + and convivial experience
+
+
+
+
+ 
+
+
+ + Education +
++ A platform for + educational management
+
+
+
+
+ 
+
+
+ + Manufacturing +
++ Plan, track and + schedule your operations
+
+
+
+
+ 
+
+
+ + E-commerce & Website +
++ Mobile + friendly, + awe-inspiring product pages
+
+
+
+
+ 
+
+
+ + Service Management +
++ Keep track of + services and invoice
+
+
+
+
+ 
+
+
+ + Restaurant +
++ Run your bar or + restaurant methodically
+
+
+
+
+ 
+
+
+ + Hotel Management +
++ An + all-inclusive + hotel management application
+
+
+
+
+
+
+
+ Need Help?
++
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+ +
+ + +