www.webdeveloper.com
Results 1 to 2 of 2

Thread: How-To: Wordpress Particular page Auto Scroll feature to particular id after the page

Hybrid View

  1. #1
    Join Date
    Feb 2013
    Posts
    1

    How-To: Wordpress Particular page Auto Scroll feature to particular id after the page

    First of all - Hi !

    I would like to know how to make an auto scroll based on javascript within the Wordpress but working only on one particular page. In huge shortcut - user clicks on a page and then simply page scrolls to particular id after it loads itself.

    I've created a folder 'Scripts' in wp-content to not make things in mess. Something tells me that there needs to be a file that is a script which I'll place in 'Scripts' folder. After that probably I'll have to ignit that script on that particular page in html view or raw-find the file of that page and edit it to inject the proper reference (for script ignition).

    Probably also I need to mark a part of the page with an element that has an id. It can be a 'div' for example with and id="scroll". Then under script's raw code I'll have to refer to that particular place on page. Like that each view of the page will result in ignition of the script which again will give a result of auto-scroll to that particular div.

    I am not new to html and css but to javascript - yes. Feels like rocket science gosh...

    Any help in creating and implementing such a (theoretically simple) feature would be appreciated.

  2. #2
    Join Date
    Dec 2012
    Location
    NSW Australia
    Posts
    73
    Quote Originally Posted by Dan1989 View Post
    user clicks on a page and then simply page scrolls to particular id after it loads itself.
    I interpret that to mean first page (html file) has a link to a second page (html file) that will scroll to the desired spot/place when it finishes loading..

    That feature has been part of html for some time and does not need JavaScript.

    Unless of course WP does not allow it, in that case ?

    Here goes...........

    Page One name it sumpin like *start.htm*

    HTML Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>go to</title>
    </head>
    <body>
    <p>A simple page scroll without javascript??????</p>
    <p><a href="pageTwo.htm#two">New page and scroll to <b>Second</b> lot of paragraphs</a></p>
    <p><a href="pageTwo.htm#three">New page and scroll to <b>Third</b> lot of paragraphs</a></p>
    </body>
    </html>

    now the second htm file

    Name it *pageTwo.htm*

    NOTE: *htm* not *html* unless you change the *start.htm* file links to suit your name. IMPORTANT.

    HTML Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Done</title>
    </head>
    <body>
    <a name="top"></a>
    <h1>You are at the top now..</h1><p>some stuff 1</p><p>some stuff 1</p><p>some stuff 1</p><p>some stuff 1</p><p>some stuff 1</p><p>some stuff 1</p><p>some stuff 1</p><p>some stuff 1</p><p>some stuff 1</p><p>some stuff 1</p><p>some stuff 1</p><p>some stuff 1</p><p>some stuff 1</p>
    <a name="two"></a>
    <h2>Top of the second lot of paragraphs...</h2><p>some stuff 2</p><p>some stuff 2</p><p>some stuff 2</p><p>some stuff 2</p><p>some stuff 2</p><p>some stuff 2</p><p>some stuff 2</p><p>some stuff 2</p><p>some stuff 2</p><p>some stuff 2</p><p>some stuff 2</p><p>some stuff 2</p><p>some stuff 2</p><p>some stuff 2</p><p>some stuff 2</p><p>some stuff 2</p><p>some stuff 2</p><p>some stuff 2</p><p>some stuff 2</p><p>some stuff 2</p><p>some stuff 2</p><p>some stuff 2</p><p>some stuff 2</p><p>some stuff 2</p><p>some stuff 2</p><p>some stuff 2</p><p>some stuff 2</p><p>some stuff 2</p><p>some stuff 2</p><p>some stuff 2</p><p>some stuff 2</p><p>some stuff 2</p><p>some stuff 2</p><p>some stuff 2</p><p>some stuff 2</p><p>some stuff 2</p><p>some stuff 2</p><p>some stuff 2</p>
    <a name="three"></a>
    <h3>Top of the third lot of paragraphs...</h3><p>some stuff 3</p><p>Now scroll down to bottom</p><p>some stuff 3</p><p>some stuff 3</p><p>some stuff 3</p><p>some stuff 3</p><p>some stuff 3</p><p>some stuff 3</p><p>some stuff 3</p><p>some stuff 3</p><p>some stuff 3</p><p>some stuff 3</p><p>some stuff 3</p><p>some stuff 3</p><p>some stuff 3</p><p>some stuff 3</p><p>some stuff 3</p><p>some stuff 3</p><p>some stuff 3</p><p>some stuff 3</p><p>some stuff 3</p><p>some stuff 3</p><p>some stuff 3</p><p>some stuff 3</p><p>some stuff 3</p><p>some stuff 3</p>
    <a href="#top">Go back to top of page from here</a>
    <p>Is this feature what you are after</p>
    <hr>
    </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles