+
+
+
+
+ 
+
+
+
+
+
+
+
+
+ Community
+
+
+ Enterprise
+
+
+ Odoo.sh
+
+
+
+
+
+
+
+ 
+
+ + 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
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+ + Community, Enterprise & Odoo.sh Support.
++ It will support on Community, Enterprise & Odoo.sh +
+
+
+
+
+
+
+
+
+ + Easy to Move
++ 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.
+
+
+
+
+ 
+
+
+ Related + Products +
+
+
+
+
+
+
+
+
+ 
+ 
+ 
+ 
+ 
+
+
+
+
+ 
+
+
+ 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
+
+
+
+ 
+
+
+ Support +
+
+
+
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..1fe7695b6
--- /dev/null
+++ b/website_scroll_buttons/static/src/css/scroll_button.css
@@ -0,0 +1,71 @@
+.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: 30rem) {
+ .scroll_icon_bottom {
+ display: none;
+ }
+}
+@media (max-height: 35rem) {
+ .scroll_icon_bottom {
+ display: block;
+ }
+}
+
+@media (min-height: 30rem) {
+ .scroll_icon {
+ display: none;
+ }
+}
+@media (max-height: 35rem) {
+ .scroll_icon {
+ display: block;
+ }
+}
+@media (max-width:800px){
+.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..1af668f4e
--- /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 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);
+ },
+ })
+ PublicWidget.registry.website_scroll_buttons = Template;
+ return Template;
+})
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..53e1964aa
--- /dev/null
+++ b/website_scroll_buttons/views/website_scroll_buttons_templates.xml
@@ -0,0 +1,22 @@
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+ 
+
+
+