1

I'm drawing a blank on how to handle events within Javascript, and want to avoid using a modular function that has the "onclick" within the html tag. Basically, I want to write a function that will scroll to the section of the page containing that element on click, but I'm drawing a blank on how to do that.

I have a modular function like this:

var elmnt = $("#links").on("click", function() {
    elmnt.scrollIntoView;
    console.log;
});

Now, I pass the argument on the a href tag, but how do I have JS look for these events and scroll to them? Do I write a function for each link clicked? Is there a better way to do that? Thank you in advance.

goon
  • 37
  • 4

2 Answers2

0

Below are few corrections:

1) scrollIntoView is function

2) click callback handler should have reference to element

Check below code.

var elmnt = $("#links").on("click", function(ele) {
    ele.scrollIntoView();
    //console.log;
});
Fraddy
  • 331
  • 1
  • 8
0

The idea is not for JS to "search for events", but to bind the buttons and destinations using a loop in an init script. Then all you need to do is to define the target of a button with an attribute, and JS will automatically take care of the rest.

Hence, you might wish to make scrollIntoView() a global function, and have it accept the element you wish to scroll to as a param, like such.

function scrollIntoView(target) {
  // Scroll code here
}

For scroll code example see here and here

Edit: somethinghere pointed out that scrollIntoView() is actually natively supported, so there is no need to write your own function anymore.

Say you have 3 buttons and 3 destinations in your DOM (I will use button in place of a for clarity's sake):

<button class="button_type_a" type="button">Scroll to destination A</button>
<button class="button_type_a" type="button">Scroll to destination B</button>
<button class="button_type_k" type="button">Scroll to destination C</button>

...

<div id="dest_A">Destination A</div>
<div id="dest_B">Destination B</div>
<div id="dest_C">Destination C</div>

First prepare the buttons:

  1. Add an arbitrary class (goto_button) to indicate the intended action of the button
  2. Add an arbitrary attribute (target) to indicate their respective destinations

Something like this:

<button class="button_type_a goto_button" type="button" target="dest_A">Scroll to destination A</button>
<button class="button_type_a goto_button" type="button" target="dest_B">Scroll to destination B</button>
<button class="button_type_k goto_button" type="button" target="dest_C">Scroll to destination C</button>

in which the value of target is the id of the destination.

Then in your JS, first find all your buttons:

var gotoButtons = document.getElementsByClassName("goto_button");

Then loop through your buttons, and for each one search and bind to their destination:

for (let btn of gotoButtons) {
  let target = btn.getAttribute("target");
  let destination = document.getElementById(target);
  btn.addEventListener("click", () => {
    destination.scrollIntoView();
  });
}

Load this JS as an init script for your page and you should be all set.

cyqsimon
  • 2,752
  • 2
  • 17
  • 38
  • `Element.scrollIntoView` is actually a native JS method on an element, so no need to 'define that yourself'. (https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView). – somethinghere Nov 02 '19 at 06:16
  • 1
    @somethinghere thanks. I remember seeing someone writing a custom function for this feature and so I have been doing the same. This is helpful to know. Answer edited accordingly. – cyqsimon Nov 02 '19 at 06:24