ScrollTo more than one anchor

[hellehs90 1 Likes (Newbie)]

Hi guys,

 

I have several anchor points I want to scroll to, like this:

$('#goToAnchor1').on('click', function() {
  TweenMax.to(window, 1, {scrollTo:{y:'#anchor1', offsetY:140, ease: Power3.easeOut}});
});


$('#goToAnchor2').on('click', function() {
  TweenMax.to(window, 1, {scrollTo:{y:'#anchor2', offsetY:140, ease: Power3.easeOut}});
});

 

Is it possible to do this with all the anchor links that looks like this? With a for-loop for example?

[mikel 1,823 Likes (Superhero)]

Hi @hellehs90,

 

Does this animation meet your expectations?

 

See the Pen 2ddff7e11d5c9b3df300645b7d8e7dd9 by mikeK (@mikeK) on CodePen

 

Happy tweening and scrolling ...

Mikel

 

 

[Carl 9,066 Likes (Superhero)]

If I understand correctly, I think he wants to use a loop just to minimize the code.

Interestingly, our example in the scrollToPlugin docs actually has loop snippet commented out at the bottom.

 

Here is the code

 

$("button").each(function(index, element){
  $(this).click(function(){
    TweenLite.to(window, 1, {scrollTo:{y:"#section" + (index+1), offsetY:70}});
  })
}) 

 

See the Pen ZrQBGb?editors=0010 by GreenSock (@GreenSock) on CodePen

 

[Visual-Q 586 Likes (Leader)]

I had a question. What is the point of passing the 'element' parameter to jQuery each?

 

I believe 'this' already refers to the selected element and  $(this) the jQuery object by default.  Jquery shows an example of it their documentation by doesn't explain the purpose of it.

 

I guess maybe it's just for semantics allows you give 'this' a different name?

 

 

[OSUblake 9,990 Likes (Superhero)]

On 2/2/2018 at 3:02 PM, Visual-Q said:

I had a question. What is the point of passing the 'element' parameter to jQuery each?

 

I believe 'this' already refers to the selected element and  $(this) the jQuery object by default.  Jquery shows an example of it their documentation by doesn't explain the purpose of it.

 

I guess maybe it's just for semantics allows you give 'this' a different name?

 

 

jQuery's documentation is full of poorly written code. Here they use 'this' and 'element'.

 

$( "button" ).click(function() {
  $( "div" ).each(function( index, element ) {
    $( element ).css( "backgroundColor", "yellow" );
    if ( $( this ).is( "#stop" ) ) {
      $( "span" ).text( "Stopped at div index #" + index );
      return false;
    }
  });
});

 

 

I think it's better to use the parameter. What 'this' refers to may not always be the element.

 

// Using function inside callback
$(".box").each(function() {  
  innerFunction();  
  function innerFunction() {
    console.log(this); // FAIL
  }
});

// Using bound function
$(".box").each(function() {
  console.log(this); // FAIL
}.bind());

// Using arrow function
$(".box").each(() => {
  console.log(this); // FAIL
});

 

 

[fedehache 1 Likes (Newbie)]

Hi!
I'm trying to get this:
 

$("button").each(function(index, element){
  $(this).click(function(){
    TweenLite.to(window, 1, {scrollTo:{y:"#section" + (index+1), offsetY:70}});
  })
}) 

... but in plain vanilla JS. Here's the pen i got so far: 

 

See the Pen gJorWN by fedechinaski (@fedechinaski) on CodePen

 

But that doesn't work. Any thoughts?

 

[mikel 1,823 Likes (Superhero)]

Hi @fedehache,

 

I would not take an a tag.

Just this code

 

See the Pen BeJzPw by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

[fedehache 1 Likes (Newbie)]

that was fast @mikel. Thank you!

[mikel 1,823 Likes (Superhero)]

 

 

Fact is: GreenSock is a very fast animation tool.

 

See you ...

Mikel