Jump to content
GreenSock

hellehs90

ScrollTo more than one anchor

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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?

Link to comment
Share on other sites

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

 

  • Like 6
Link to comment
Share on other sites

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?

 

 

Link to comment
Share on other sites

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
});

 

 

  • Like 4
Link to comment
Share on other sites

  • 1 year later...

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?

 

Link to comment
Share on other sites

 

 

Fact is: GreenSock is a very fast animation tool.

 

See you ...

Mikel

  • Like 4
  • Haha 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×