Button Settings: Scroll to Page Anchor and Close Off-Canvas Simultaneously

[TomRaraAvis]

Prerequisites

• I have searched for similar feature requests in both open and closed discussions and cannot find an existing request.
• I have verified that the feature is still missing from the latest stable versions of Elementor or Elementor Pro.

What problem is your feature request going to solve? Please describe..

Issue Description:

Currently, in Elementor, I can configure a button inside an off-canvas menu to perform one of the following actions:

1. Scroll to a specific page anchor by setting the link field to #unique-anchor-tag-on-same-page.

2. Close the off-canvas menu using the dynamic tag as per Elementor's documentation.

However, it is not possible to configure the button to perform both actions simultaneously without using custom JavaScript. I would like to be able to achieve this functionality directly through Elementor's UI.

Steps to Reproduce:

1. Add a button inside an off-canvas menu in Elementor.

2. Set the button's link field to a page anchor (e.g., #unique-anchor-tag-on-same-page).

3. Attempt to configure the same button to close the off-canvas menu.

4. Observe that only one action can be performed at a time.

Describe the solution you'd like.

Expected Behavior:

The button should allow users to configure it to scroll to a specific page anchor and close the off-canvas menu simultaneously, without needing custom JavaScript.

Actual Behavior:

The button can either scroll to the page anchor or close the off-canvas menu, but not both.

Request:

Please consider adding built-in support for this functionality, allowing users to achieve this behavior without relying on custom JavaScript.

Describe alternatives you've considered.

Current Workaround (Using JavaScript):

In this workaround, each button's link field is set to a unique anchor tag on the same page, like #unique-anchor-tag-on-same-page. The following JavaScript ensures the off-canvas menu closes and the page scrolls to the specified anchor simultaneously. Here is the JavaScript I use to achieve this functionality as a temporary solution:

<script>
jQuery(function ($) {
    // Handle clicks on buttons inside the container with class "close-offcanvas-button-container"
    $(".close-offcanvas-button-container").on("click", "a.elementor-button", function () {
        // Close the off-canvas menu by setting aria-hidden to true
        $("#off-canvas-d573f2c").attr("aria-hidden", "true");
    });
});

jQuery(document).ready(function($) {
  // Smooth scrolling to anchor tags
  $('a[href^="#"]').on('click', function(e) {
    e.preventDefault();

    var targetElement = $(this.getAttribute('href'));
    
    // Get the viewport height for adjustment
    var viewportHeight = $(window).height();
    
    if(targetElement.length) {
      // Scroll to the target element, adjusting by 33% of the viewport height
      $('html, body').animate({
        scrollTop: targetElement.offset().top - (viewportHeight * 0.33)
      }, 500);  // Adjust scroll speed (milliseconds)
    }
  });
});
</script>

This JavaScript works by:

1. Detecting button clicks inside a container with the class .close-offcanvas-button-container.

2. Closing the off-canvas menu by updating its aria-hidden attribute.

3. Smoothly scrolling to the specified page anchor, adjusted to align with 33% of the viewport height.

Environment:
Elementor Version 3.26.2 by Elementor.com
Elementor Pro Version 3.26.1 by Elementor.com
Browser: Google Chrome Version 131.0.6778.205 (Official Build) (64-bit)
WordPress Version: 6.7.1

Additional context

wp-core

version: 6.7.1
site_language: en_US
user_language: en_US
timezone: America/New_York
permalink: /%postname%/
https_status: true
multisite: false
user_registration: 0
blog_public: 1
default_comment_status: undefined
environment_type: production
user_count: 1
dotorg_communication: true

wp-paths-sizes

wordpress_path: /home/public_html
wordpress_size: 57.64 MB (60443860 bytes)
uploads_path: /home/public_html/wp-content/uploads
uploads_size: 1.44 GB (1546560906 bytes)
themes_path: /home/public_html/wp-content/themes
themes_size: 8.72 MB (9140578 bytes)
plugins_path: /home/public_html/wp-content/plugins
plugins_size: 213.09 MB (223439932 bytes)
fonts_path: /home/public_html/wp-content/uploads/fonts
fonts_size: directory not found
database_size: 33.56 MB (35192832 bytes)
total_size: 1.75 GB (1874778108 bytes)

wp-dropins (2)

advanced-cache.php: true
object-cache.php: true

wp-active-theme

name: Hello Elementor Child (theme child)
version: 1.0.1
author: Elementor Team
author_website: https://elementor.com/
parent_theme: Hello Elementor (hello-elementor)
theme_features: core-block-patterns, widgets-block-editor, block-templates, post-thumbnails, menus, automatic-feed-links, title-tag, html5, custom-logo, align-wide, responsive-embeds, editor-styles, editor-style, woocommerce, wc-product-gallery-lightbox, wc-product-gallery-slider
theme_path: /home/public_html/wp-content/themes/
auto_update: Disabled

wp-parent-theme

name: Hello Elementor (hello-elementor)
version: 3.2.1
author: Elementor Team
author_website: https://elementor.com/
theme_path: /home/public_html/wp-content/themes/hello-elementor
auto_update: Disabled

wp-themes-inactive (1)

Twenty Twenty-Five: version: 1.0, author: the WordPress team, Auto-updates disabled

wp-plugins-active (23)

Elementor Version 3.26.2 by Elementor.com
Elementor Pro Version 3.26.1 by Elementor.com
[removed for privacy]

wp-media

[removed for privacy]

wp-server

server_architecture: Linux 5.10.0-31-amd64 x86_64
httpd_software: Apache/2.4.62 (Debian)
php_version: 8.3.14 64bit
php_sapi: fpm-fcgi
max_input_variables: 5000
time_limit: 300
memory_limit: 512M
max_input_time: 300
upload_max_filesize: 64M
php_post_max_size: 64M
curl_version: 7.74.0 OpenSSL/1.1.1w
suhosin: false
imagick_availability: true
pretty_permalinks: true
htaccess_extra_rules: true
current: 2024-12-20T21:38:51+00:00
utc-time: Friday, 20-Dec-24 21:38:51 UTC
server-time: 2024-12-20T16:38:51-05:00

wp-database

extension: mysqli
server_version: 10.6.20-MariaDB-deb11-log
client_version: mysqlnd 8.3.14
max_allowed_packet: 134217728
max_connections: 29538

wp-constants

WP_HOME: undefined
WP_SITEURL: undefined
WP_CONTENT_DIR: /home/public_html/wp-content
WP_PLUGIN_DIR: /home/public_html/wp-content/plugins
WP_MEMORY_LIMIT: 256M
WP_MAX_MEMORY_LIMIT: 512M
WP_DEBUG: false
WP_DEBUG_DISPLAY: true
WP_DEBUG_LOG: false
SCRIPT_DEBUG: false
WP_CACHE: true
CONCATENATE_SCRIPTS: undefined
COMPRESS_SCRIPTS: undefined
COMPRESS_CSS: undefined
WP_ENVIRONMENT_TYPE: undefined
WP_DEVELOPMENT_MODE: undefined
DB_CHARSET: utf8
DB_COLLATE: undefined

wp-filesystem

wordpress: writable
wp-content: writable
uploads: writable
plugins: writable
themes: writable
fonts: not writable

wp_mail_smtp

version: 4.3.0
license_key_type: lite
debug: No debug notices found.
lite_install_date: Nov 1, 2024 @ 12:46am

Agreement

• I agree that my request may be closed without action if it doesn't meet all the requirements.