Guide on smoothly scrolling to an anchor point using Adobe Edge animations

Struggling to find a solution to my simple problem. I want to create an animated button on my website that scrolls to a specific anchor point on the same page.

The code I currently have in Edge's code snippet box isn't working as expected. It's frustrating because it's unclear where exactly the code is being placed within the final result.

// add code for mouse click here
window.scrollTo(0,0);

//want it to scroll to #Main

Most of the code in Edge typically begins with:

sys.someAction()

If you're interested in seeing what I'm attempting to do, check out my site: www.daniellachman.com

Thanks!

Edit: Here is the complete code snippet along with the provided code below:

  //Edge binding end
  //CUSTOM CODE FROM Monty82
  function scrollToTag(tagName) {
    var myTag = $("a[name='"+ tagName +"']");
    $('html,body').stop(false,false).animate({scrollTop: myTag.offset().top}, 'slow');
}

    //Edge binding end
    //Original Mouse Clicking Function Provided by Edge
    Symbol.bindElementAction(compId, symbolName, "${_newlogoheader}", "click", function(sym, e) {
      // insert code for mouse click here
      //Stuff I added to call custom function above
      sym.scrollToTag("main")
  });

Despite my efforts, the solution didn't work, but I believe I'm making progress. www.daniellachman.com

If anyone has insights into examining the JavaScript for the menu navigation buttons like "about" and "contact" to determine how they trigger scrolling, please share your thoughts.

Answer №1

If you're working with JavaScript/jQuery, this code snippet could be useful for you:

function scrollToAnchor(anchorName) {
    var myAnchor = $("a[name='"+ anchorName +"']");
    $('html,body').stop(false,false).animate({scrollTop: myAnchor.offset().top}, 'slow');
}

Make sure to provide the name of the anchor (not the ID) as the parameter for the function to scroll to the desired location.

It's worth noting that this function is optimized for vertical scrolling. If your website involves horizontal scrolling as well, consider incorporating scrollLeft into the code.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating a dynamic background image with automatic cropping techniques: How to do it?

I'm currently working on a custom wordpress theme and I've encountered an issue that I need help with. I want to have a wide background image on my homepage with text centered on it, but I also want the height to remain the same as the browser w ...

Automatically tally up the pages and showcase the page numbers for seamless printing

I've been tackling a challenge in my Vue.js application, specifically with generating invoices and accurately numbering the pages. An issue arose when printing the invoice – each page was labeled "Page 1 of 20" irrespective of its actual position in ...

After a postback, the Javascript function removes the displayed div

I am facing an issue with a page containing a button that uses JavaScript to display the content of a div. I also have an ASP.net validator control that triggers a postback. When I debug the JavaScript in Firebug, the div remains visible; however, if I all ...

The div table that was created failed to display on the screen

In the process of developing a React web application, I am attempting to dynamically create a table based on selected data (users from a specific time period). While the user data is successfully downloaded, I am facing an issue with rendering the table. T ...

Hiding an image when pressing on a navbar icon: Tips and tricks

How can I toggle the visibility of an image when the bars icon is pressed on smaller screens, using CSS without JQuery or JavaScript? I have attempted to hide the image with visibility: hidden; in CSS but it does not work as intended. Please run this cod ...

What are some ways to create a multi-select event?

Check out my HTML code: <select id="specific_choice14" multiple="multiple"> <option value="Shampoing">Shampoing</option> <option value="Après Shampoing">Après Shampoing</option> <option value="Mask"> ...

Tips for accessing various JSON objects from a JSON document

My task involves extracting specific information from a JSON file using AJAX and jQuery. The structure of my JSON data is as follows: "Footwear": { "Adidas": [ { "id" : 0, &q ...

I am experiencing difficulties getting my custom CSS styles to appear on my webpage despite using Bootstrap

I recently entered the world of Bootstrap and decided to take an online class to learn more about it. During the course, I discovered that I could create custom CSS classes to enhance my webpage. So, I set up a folder named my project folder and added th ...

Is there a way to implement a pop-up feature on my website similar to that of Stack Overflow?

I noticed that when I hover over my username on the website, a box drops down. I'm interested in creating something similar. Can anyone provide guidance on how to replicate this effect? Thanks! ...

Organizing Checkbox Groups for Validation in Bootstrap

My form consists of 2 checkboxes and I only want to submit the form if at least one checkbox is checked. The current code requires both checkboxes to be checked, but I tried grouping them using the name attribute without success. How can I group checkbox ...

I need assistance with the issue of isset not functioning properly when attempting to upload multiple files

I have been struggling to upload multiple files using various scripts. It works fine most of the time, but occasionally some files fail to upload and I am unable to identify the issue. There is a file containing images, and when I select all the images, t ...

Tips for excluding a CSS property from a class override

I have a file called _buttons.scss: .btn { display: inline-block; font-family: $btn-font-family; font-weight: $btn-font-weight; color: $body-color; text-align: center; text-decoration: if($link-decoration == none, null, none); white-space: $b ...

Issue with bidirectional data binding in Angular 2 on input element not functioning as expected

Looking at the code snippet below, I have noticed that even though the textchange function is called when the input value changes, the text property of the InputMaskComponent remains constant. I am not able to identify the issue in my code. InputMaskCompo ...

Angular 7 - Datatables - File Upload Feature

I'm trying to incorporate an "upload" button into my table: Below is my TS file with dtOption : ... order: [[3, 'desc']], dom: 'Blfrtip', stateSave: true, buttons: [ ...

Show both text and image inputs side by side within a table

Hey there, I'm trying to create a table with both text and image inputs inside. Here's the code I've attempted: <tbody> <tr> <td class="inputs"> <input type=" ...

Learn the process of fetching checkbox values using JavaScript with this snippet

Is it possible to retrieve the name of the selected checkbox values/labels from the following code: <input id ="abc" value="abeexch" type ="checkbox"> <input id ="nam" value="suns" type ="checkbox"> If a checkbox is selected, how can I obtain ...

JavaScript Regular Expression for standardizing phone number input

I'm working with an input for a phone number in French format which can accept two different formats: 0699999999 +33699999999 There is currently no check for the length of the number. In the database table, the field is varchar 12, but shorter inp ...

Make the text stand out by highlighting it within a div using a striking blue

Currently, I am working with Angular2 and have incorporated a div element to display multiple lines of text. Positioned below the text is a button that, when clicked, should select the entirety of the text within the div (similar to selecting text manually ...

The communication between Ajax and PHP is experiencing some technical difficulties

Hi there! I'm currently facing an issue with my Ajax call to a PHP function. My goal is to display the server time on the input field using a PHP script. Despite following an online tutorial step by step, I keep getting the actual text from the PHP fi ...

What can I do to prevent a panel from being pushed beneath two other panels when the window size is reduced?

These are my three panels: ___ _________ ___ | | | | | | | | | | | | | | | | | | | | | | | | |___| |_________| |___| When I resize the window slightly, the layout changes: ___ ...