So, this af:scrollComponentIntoViewBehaviour is a new component which I have came across recently. These days, we are seeing many basic websites which have all the content in one page like Home, About Us, Contact Us... etc and when you click on the links to them, they just scroll to that section.
Even if you open a blogger site, all the content is there in one page, and when you click on post titles, it scrolls to that post and opens it.
We can implement this using ADF too.
In this post, I will explain how to achieve this.
1. Here I prepared 3-4 posts which has very lengthy content so that, we need to scroll to see the other post.
And I have 4 buttons, just to take to these posts.
Do not worry about the component, that is some junk.
2. Now the expectation is when I click on Post 2, it should scroll to Post 2, and when I click on Post 3 button it should scroll to Post 3 just like below.
Even if you open a blogger site, all the content is there in one page, and when you click on post titles, it scrolls to that post and opens it.
We can implement this using ADF too.
In this post, I will explain how to achieve this.
1. Here I prepared 3-4 posts which has very lengthy content so that, we need to scroll to see the other post.
And I have 4 buttons, just to take to these posts.
Do not worry about the component, that is some junk.
2. Now the expectation is when I click on Post 2, it should scroll to Post 2, and when I click on Post 3 button it should scroll to Post 3 just like below.
3. This doesn't require any code, we just need to use af:scrollComponentIntoViewBehaviour on all the buttons.
4. The properties for the component are also pretty simple.
The properties for af:scrollComponentIntoViewBehaviour under Post 2 button would look like below:
Yes, you have seen it right. Just the component Id of the second post. In this case, Id of the panel box 2, pb2.
That's it!! :)
No comments:
Post a Comment