Is transforming lengthy code into a function the way to go?

Question

Is transforming lengthy code into a function the way to go?

I have successfully implemented this code on my page without any errors, but I am wondering if there is a more concise way to achieve the same result. Currently, there is a lot of repeated code with only minor changes in class names. Is it possible to shorten this code by using a function or loop? Your suggestions would be greatly appreciated.

//menu
            $('.aboutOne').click(function(){
                $.scrollTo('.basicsRow', 1000, {axis:'yx'});
                $.scrollTo('.basicsRow', 1000, {axis:'xy'});
            })
            $('.aboutTwo').click(function(){
                $.scrollTo('.storyRow', 1000, {axis:'yx'});
                $.scrollTo('.storyRow', 1000, {axis:'xy'});
            })
            $('.aboutThree').click(function(){
                $.scrollTo('.teamRow', 1000, {axis:'yx'});
                $.scrollTo('.teamRow', 1000, {axis:'xy'});
            })

            // Code repeats above sequence...

javascript jquery css loops scrollto

Answer 1

Answer №1

To enhance manageability, consider consolidating everything into an object and then passing it to a function:

var elements = {
     '.aboutTwo':'.teamRow',
     '.aboutThree':'.homeRow',
     ...
};

function handleMenuClick(elements){
     $.each(elements, function(key, value){
         $(key).click(function(){
            $.scrollTo(value, 1000, {axis: "yx"});
            $.scrollTo(value, 1000, {axis: "yx"});
         });
     });
}

// Invoke the function
handleMenuClick(elements);

This approach allows for easy modifications by simply updating the elements object.

NOTE: It is recommended to use jQuery's .on() method (Documentation) for event binding.

Answer 2

To enhance manageability, consider consolidating everything into an object and then passing it to a function:

var elements = {
     '.aboutTwo':'.teamRow',
     '.aboutThree':'.homeRow',
     ...
};

function handleMenuClick(elements){
     $.each(elements, function(key, value){
         $(key).click(function(){
            $.scrollTo(value, 1000, {axis: "yx"});
            $.scrollTo(value, 1000, {axis: "yx"});
         });
     });
}

// Invoke the function
handleMenuClick(elements);

This approach allows for easy modifications by simply updating the elements object.

NOTE: It is recommended to use jQuery's .on() method (Documentation) for event binding.

Answer 3

Answer №2

To specify the scrolling destination for each clickable element, I suggest utilizing data- attributes like this:

 <a class="clicktoscroll sectionOne" data-target="introSection">...</a>

You can simplify your code by using just one event handler:

        $('.clicktoscroll').click(function(){
            var $target = $(this).data('target');
            $.scrollTo('.' + $target, 1000, {axis:'yx'});
            $.scrollTo('.' + $target, 1000, {axis:'xy'});
        })

Answer 4

To specify the scrolling destination for each clickable element, I suggest utilizing data- attributes like this:

 <a class="clicktoscroll sectionOne" data-target="introSection">...</a>

You can simplify your code by using just one event handler:

        $('.clicktoscroll').click(function(){
            var $target = $(this).data('target');
            $.scrollTo('.' + $target, 1000, {axis:'yx'});
            $.scrollTo('.' + $target, 1000, {axis:'xy'});
        })

Answer 5

Answer №3

To enable smooth scrolling on your website, consider utilizing a custom data-* attribute such as data-scroll-to. This way, your elements can dictate where the page should scroll to.

<button class="about" data-scroll-to=".basicsRow">Button</button>

Here is an example implementation:

$("[data-scroll-to]").each(function() {
    var $this = $(this), target = $this.data("scroll-to");
    $this.click(function() {
        $.scrollTo(target, 1000, { axis: 'yx' });
        $.scrollTo(target, 1000, { axis: 'xy' });
    });
});

Answer 6

To enable smooth scrolling on your website, consider utilizing a custom data-* attribute such as data-scroll-to. This way, your elements can dictate where the page should scroll to.

<button class="about" data-scroll-to=".basicsRow">Button</button>

Here is an example implementation:

$("[data-scroll-to]").each(function() {
    var $this = $(this), target = $this.data("scroll-to");
    $this.click(function() {
        $.scrollTo(target, 1000, { axis: 'yx' });
        $.scrollTo(target, 1000, { axis: 'xy' });
    });
});

Is transforming lengthy code into a function the way to go?

Answer №1

Answer №2

Answer №3

Similar questions

Ways to acquire the reference of the parent component

extract keys and values from an array of objects

What is the best way to align two divs next to each other while keeping the second one centered with flexbox?

Ensure that the date range picker consistently shows dates in a sequential order

The content of the string within the .ts file sourced from an external JSON document

What is the right rendering strategy to use for shouldComponentUpdate in React?

Discovering how to efficiently track and respond to changes in MobX state within a React

Troubleshooting Google Web Fonts

The class name remains unchanged despite the change in value

What is the best way to showcase a ul element as inline-block?

Click on a specific image in a table using Cypress with a specific source URL

Designing links within a web application

What techniques can I use to achieve a seamless transition using Javascript and CSS?

Instructions on how to modify a document's content by its unique identifier using Firebase Modular SDK (V9)

Checking for mobile SSR in a ReactJS applicationUncover the signs of mobile

Issue with Object.keys printing in an abnormal manner

the reason behind the peculiar behavior of angularjs ng-include

Are there any performance implications when using an excessive number of background images in CSS?

Tips for incorporating inline styling into the body element

Retrieving Data from Outside Source using AngularJS