Jump to content
Search Community

What is wrong with this scrollTo stuff?

jesper.landberg test
Moderator Tag

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,

 

I am trying to use scrollToPlugin for the first time but I have a strange(?) issue. It works fine IF the element anchor I'm scrolling to has position: fixed. If else it doesn't work it just jumps there like a normal anchor. Can anyone see what is wrong? (also I'm parting ways with jQuery if you think my JS looks ugly or something:P)

 

Code (part of a Class):

import TweenMax from 'gsap'
import utils from './config'
import domselect from 'dom-select'
import scrollTo from './ScrollToPlugin.min'

this.topLink.forEach((el) => {

	const href = el.getAttribute('href')
	const url = href.replace(/\/+$/, "")
	const submenu = el.nextElementSibling
	const links = utils.js.arrayFrom(submenu.querySelectorAll('a'))

	links.forEach((el) => {

		if(utils.$url.indexOf(url) > -1){

			el.addEventListener('click', (ev) => {

				const el = ev.target
				const anchor = el.getAttribute('href')
				const scrollTo = domselect(`${anchor}`).offsetTop

				TweenMax.to(window, 1, { 
					scrollTo: { 
						y: scrollTo
					}, 
					ease: Expo.easeInOut 
				})

			})

		} else {

			const anchor = el.getAttribute('href')
			el.setAttribute('href', `${url}${anchor}`)

		}

	})

})
Link to comment
Share on other sites

Hmm, not really sure from just looking at your code. Please provide a CodePen demo as explained here:

http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

 

 

FWIW we have a ScrollToPlugin beta that will scroll directly to an element so you do not have to calculate its position.

 

Makes it super easy to do things like this:

TweenLite.to(window, 1, {scrollTo:{y:"#myElement"});

OR

 

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

http://codepen.io/GreenSock/pen/LkOrKY/

 

 

Feel free to try it in your project. If you need help with your existing method just send us a demo and we will take a look.

Link to comment
Share on other sites

Hmm, not really sure from just looking at your code. Please provide a CodePen demo as explained here:

http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

 

 

FWIW we have a ScrollToPlugin beta that will scroll directly to an element so you do not have to calculate its position.

 

Makes it super easy to do things like this:

TweenLite.to(window, 1, {scrollTo:{y:"#myElement"});

OR

 

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

See the Pen LkOrKY by GreenSock (@GreenSock) on CodePen

 

 

Feel free to try it in your project. If you need help with your existing method just send us a demo and we will take a look.

Hi, how do I use the beta? 

Link to comment
Share on other sites

this is the url:

//s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ScrollToPlugin-latest-beta.js

When you use CodePen the JS tab has a little gear that gives you access to the external resources.

I encourage you take a few minutes and get comfortable with CodePen (see link above). Its super easy to use and will really help you when you ask for support.

  • Like 2
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.
×
×
  • Create New...