{"action":"created","issue":{"url":"https://api.github.com/repos/janpaepke/ScrollMagic/issues/339","labels_url":"https://api.github.com/repos/janpaepke/ScrollMagic/issues/339/labels{/name}","comments_url":"https://api.github.com/repos/janpaepke/ScrollMagic/issues/339/comments","events_url":"https://api.github.com/repos/janpaepke/ScrollMagic/issues/339/events","html_url":"https://github.com/janpaepke/ScrollMagic/issues/339","id":86971089,"number":339,"title":"Section wipes -> Anchor Scrolling","user":{"login":"simon88pl","id":12830254,"avatar_url":"https://avatars.githubusercontent.com/u/12830254?v=3","gravatar_id":"","url":"https://api.github.com/users/simon88pl","html_url":"https://github.com/simon88pl","followers_url":"https://api.github.com/users/simon88pl/followers","following_url":"https://api.github.com/users/simon88pl/following{/other_user}","gists_url":"https://api.github.com/users/simon88pl/gists{/gist_id}","starred_url":"https://api.github.com/users/simon88pl/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/simon88pl/subscriptions","organizations_url":"https://api.github.com/users/simon88pl/orgs","repos_url":"https://api.github.com/users/simon88pl/repos","events_url":"https://api.github.com/users/simon88pl/events{/privacy}","received_events_url":"https://api.github.com/users/simon88pl/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/janpaepke/ScrollMagic/labels/support","name":"support","color":"cc317c"}],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":5,"created_at":"2015-06-10T13:29:02Z","updated_at":"2015-07-07T19:59:08Z","closed_at":null,"body":"Hello,\r\n\r\nI would like use \"section wipes\" to create simple one-page webiste. I have multiple effects exactly like in [\"Section Wipes (manual)\"](http://janpaepke.github.io/ScrollMagic/examples/advanced/section_wipes_manual.html) example (from left, from top etc.). Unfortunately, I have two problems that I cannot resolve:\r\n\r\n1. How can I navigate to a specific section? I have nav bar with link contians hashtag (ex. \"#photos\"). I would like to add:\r\na) navigation on click and:\r\nb) condition with window.location.hash (if hash... go to section).\r\nI tried use [scrollTo('#elementID\")](http://janpaepke.github.io/ScrollMagic/docs/ScrollMagic.Controller.html#scrollTo), but it scroll only to begin of wipes container.\r\n\r\n2. Similar problem like here: https://github.com/janpaepke/ScrollMagic/issues/333 - with larger content.\r\n\r\nCould you give me any advice, examples? \r\n\r\nThank you in advance.\r\nSimon"},"comment":{"url":"https://api.github.com/repos/janpaepke/ScrollMagic/issues/comments/119318062","html_url":"https://github.com/janpaepke/ScrollMagic/issues/339#issuecomment-119318062","issue_url":"https://api.github.com/repos/janpaepke/ScrollMagic/issues/339","id":119318062,"user":{"login":"janpaepke","id":3076177,"avatar_url":"https://avatars.githubusercontent.com/u/3076177?v=3","gravatar_id":"","url":"https://api.github.com/users/janpaepke","html_url":"https://github.com/janpaepke","followers_url":"https://api.github.com/users/janpaepke/followers","following_url":"https://api.github.com/users/janpaepke/following{/other_user}","gists_url":"https://api.github.com/users/janpaepke/gists{/gist_id}","starred_url":"https://api.github.com/users/janpaepke/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/janpaepke/subscriptions","organizations_url":"https://api.github.com/users/janpaepke/orgs","repos_url":"https://api.github.com/users/janpaepke/repos","events_url":"https://api.github.com/users/janpaepke/events{/privacy}","received_events_url":"https://api.github.com/users/janpaepke/received_events","type":"User","site_admin":false},"created_at":"2015-07-07T19:59:08Z","updated_at":"2015-07-07T19:59:08Z","body":"There's two problems with this:\r\n1st: I made a logic error.\r\nIf course the correct position needs to be calculated in terms of the relative progress of the scene.\r\nSo:\r\nSlide1: duration*0\r\nSlide2: duration*0.33\r\nSlide3: duration*0.66\r\nSlide4: duration*1\r\n\r\nTo get these numbers the calculation should be this:\r\n```js\r\n    var targetSection = $(this).attr('href').substring(1);\r\n    var targetPerc = (targetSection-1) / $('nav a').length;\r\n    var targetPos = scene.scrollOffset() + (scene.duration()*targetPerc);\r\n```\r\nSee here: http://jsfiddle.net/bjjvgkut/\r\n\r\n2nd:\r\nThe problem is though, that the above solution only works if all scenes have the same length.\r\nIn your case though, they don't, because of the additional content of slide 2.\r\n\r\nSo of course you could resolve this by calculating the correct lenghts etc. But the better way would be to go for one scene per animation, as mentioned before.\r\n\r\nSee here for a working example: http://jsfiddle.net/janpaepke/pra8gta0/\r\n\r\nNow, because the scenes run successively the offset's need to be relative, so I used positioned trigger elements to make sure of that.\r\nI can see that for this usecase this is kind of complicated and there should be a better way.\r\n(maybe I'll introduce relative offsets after all)\r\nI'll definitely think about it for the next update.\r\n"}}