Browse Source

[8.0][website_anchor_smooth_scroll] Smooth scrolling on anchors.

Get it for free for all of your `<a href="#whatever">Move me</a>` elements!
pull/412/head
Jairo Llopis 3 years ago
parent
commit
458a173181
7 changed files with 221 additions and 0 deletions
  1. +76
    -0
      website_anchor_smooth_scroll/README.rst
  2. +0
    -0
      website_anchor_smooth_scroll/__init__.py
  3. +23
    -0
      website_anchor_smooth_scroll/__openerp__.py
  4. +79
    -0
      website_anchor_smooth_scroll/demo/pages.xml
  5. BIN
      website_anchor_smooth_scroll/static/description/icon.png
  6. +25
    -0
      website_anchor_smooth_scroll/static/src/js/website_anchor_smooth_scroll.js
  7. +18
    -0
      website_anchor_smooth_scroll/views/assets.xml

+ 76
- 0
website_anchor_smooth_scroll/README.rst View File

@@ -0,0 +1,76 @@
.. image:: https://img.shields.io/badge/licence-AGPL--3-blue.svg
:target: http://www.gnu.org/licenses/agpl-3.0-standalone.html
:alt: License: AGPL-3

=================================
Smooth Scroll for Website Anchors
=================================

This module extends the functionality of website links to support smooth
scrolling and allow you to have it for free and with zero configuration.

Installation
============

You might be interested in the module ``website_snippet_anchor``, that lets you
assign anchors and link to them easily, but it is not required.

Usage
=====

To use this module, you need to:

#. Go to any website view.
#. Create any link whose URL starts with ``#``.
#. Save.
#. Click on it.

.. image:: https://odoo-community.org/website/image/ir.attachment/5784_f2813bd/datas
:alt: Try me on Runbot
:target: https://runbot.odoo-community.org/runbot/186/8.0

Known issues / Roadmap
======================

* Add option to smooth when changing page.

Bug Tracker
===========

Bugs are tracked on `GitHub Issues
<https://github.com/OCA/website/issues>`_. In case of trouble, please
check there if your issue has already been reported. If you spotted it first,
help us smashing it by providing a detailed and welcomed `feedback
<https://github.com/OCA/
website/issues/new?body=module:%20
website_anchor_smooth_scroll%0Aversion:%20
8.0%0A%0A**Steps%20to%20reproduce**%0A-%20...%0A%0A**Current%20behavior**%0A%0A**Expected%20behavior**>`_.

Credits
=======

Images
------

* Odoo Community Association: `Icon <https://github.com/OCA/maintainer-tools/blob/master/template/module/static/description/icon.svg>`_.

Contributors
------------

* Rafael Blasco <rafabn@antiun.com>
* Jairo Llopis <yajo.sk8@gmail.com>

Maintainer
----------

.. image:: https://odoo-community.org/logo.png
:alt: Odoo Community Association
:target: https://odoo-community.org

This module is maintained by the OCA.

OCA, or the Odoo Community Association, is a nonprofit organization whose
mission is to support the collaborative development of Odoo features and
promote its widespread use.

To contribute to this module, please visit https://odoo-community.org.

+ 0
- 0
website_anchor_smooth_scroll/__init__.py View File


+ 23
- 0
website_anchor_smooth_scroll/__openerp__.py View File

@@ -0,0 +1,23 @@
# -*- coding: utf-8 -*-
# © 2016 Antiun Ingeniería S.L. - Jairo Llopis
# License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl).
{
"name": "Smooth Scroll for Website Anchors",
"summary": "When user clicks a link to scroll, the scroll is animated",
"version": "8.0.1.0.0",
"category": "Website",
"website": "http://www.antiun.com",
"author": "Antiun Ingeniería S.L., Odoo Community Association (OCA)",
"license": "AGPL-3",
"application": False,
"installable": True,
"depends": [
"website",
],
"data": [
"views/assets.xml",
],
"demo": [
"demo/pages.xml",
],
}

+ 79
- 0
website_anchor_smooth_scroll/demo/pages.xml View File

@@ -0,0 +1,79 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- © 2016 Jairo Llopis <jairo.llopis@tecnativa.com>
License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl). -->

<openerp>
<data>

<template id="demo_page" page="True" name="Anchor smooth scroll demo">
<t t-call="website.layout">
<div id="wrap" class="oe_structure oe_empty">
<section class="jumbotron mt16 mb16" id="top">
<div class="container">
<h1>Try smooth scrolling. Easily.</h1>
<p>
Press the button below and enjoy a smooth experience.
</p>
<p>
<a class="btn btn-primary btn-lg" href="#bottom">
Scroll to bottom
</a>
</p>
</div>
</section>
<section class="oe_dark mt16 mb16">
<div class="container">
<div class="row">
<div class="col-md-12 text-center mt32 mb32">
<h2>This is dummy content</h2>
</div>
<div class="col-md-12">
<img
alt="Odoo CMS - a big picture"
class="img img-responsive"
src="/website/static/src/img/big_picture.png"/>
</div>
</div>
</div>
</section>
<section class="oe_dark mt16 mb16">
<div class="container">
<div class="row">
<div class="col-md-12 text-center mt32 mb32">
<h2>More dummy content</h2>
</div>
<div class="col-md-12">
<img
alt="Odoo CMS - a big picture"
class="img img-responsive"
src="/website/static/src/img/big_picture.png"/>
</div>
</div>
</div>
</section>
<section class="jumbotron mt16 mb16" id="bottom">
<div class="container">
<h1>Smooth? Nice.</h1>
<p>
It works for any links to #anchors in your website!
</p>
<p>
<a class="btn btn-primary btn-lg" href="#top">
Scroll to top
</a>
</p>
</div>
</section>
</div>
</t>
</template>

<record id="demo_page_link" model="website.menu">
<field name="name">Anchor smooth scroll demo</field>
<field name="url">/page/website_anchor_smooth_scroll.demo_page</field>
<field name="parent_id" ref="website.main_menu" />
<field name="sequence" type="int">50</field>
</record>

</data>
</openerp>

BIN
website_anchor_smooth_scroll/static/description/icon.png View File

Before After
Width: 128  |  Height: 128  |  Size: 9.2KB

+ 25
- 0
website_anchor_smooth_scroll/static/src/js/website_anchor_smooth_scroll.js View File

@@ -0,0 +1,25 @@
/* © 2016 Antiun Ingeniería S.L. - Jairo Llopis
* License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl). */

"use strict";

function website_anchor_smooth_scroll(event) {
event.preventDefault();

var target = $(event.target.hash);

return $('html, body')
.stop()
.animate({
'scrollTop': target.offset().top - 100
})
.promise()
.done(function(element) {
history.pushState(null, document.title, event.target.hash);
});
}

(function ($) {
// Apply to all links that start with `#`
$("a[href^='#']").live("click", website_anchor_smooth_scroll);
})(jQuery);

+ 18
- 0
website_anchor_smooth_scroll/views/assets.xml View File

@@ -0,0 +1,18 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- © 2016 Antiun Ingeniería S.L. - Jairo Llopis
License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl). -->

<openerp>
<data>

<template id="assets_frontend"
name="Module name frontend assets"
inherit_id="website.assets_frontend">
<xpath expr=".">
<script type="text/javascript"
src="/website_anchor_smooth_scroll/static/src/js/website_anchor_smooth_scroll.js"/>
</xpath>
</template>

</data>
</openerp>

Loading…
Cancel
Save