How to Go to a Specific Element on Page

How to go to a specific element on page?

The standard technique in plugin form would look something like this:

(function($) {
    $.fn.goTo = function() {
        $('html, body').animate({
            scrollTop: $(this).offset().top + 'px'
        }, 'fast');
        return this; // for chaining...
    }
})(jQuery);

Then you could just say $('#div_element2').goTo(); to scroll to <div id="div_element2">. Options handling and configurability is left as an exercise for the reader.

Scroll to a specific Element Using html

Yes you use this

<a href="#google"></a>

<div id="google"></div>

But this does not create a smooth scroll just so you know.

You can also add in your CSS

html {
  scroll-behavior: smooth;
}

How to go on a specific element on a page

Change scroll to scrollTop:

$(window).scrollTop(findPos(document.getElementById("id_"+playerNamer.pos)));

How do I scroll to an element using JavaScript?

You can use an anchor to "focus" the div. I.e:

<div id="myDiv"></div>

and then use the following javascript:

// the next line is required to work around a bug in WebKit (Chrome / Safari)
location.href = "#";
location.href = "#myDiv";

Getting a link to go to a specific section on another page

I believe the example you've posted is using HTML5, which allows you to jump to any DOM element with the matching ID attribute. To support older browsers, you'll need to change:

<div id="timeline" name="timeline" ...>

To the old format:

<a name="timeline" />

You'll then be able to navigate to /academics/page.html#timeline and jump right to that section.

Also, check out this similar question.

html go to the specific element of another page if the element is not shown yet?

Add a query string to the URL instead of an anchor:

http://www.example.com/?q=1

Then, on the target page, get the query string and find the value of q. Then, if the value is the one you want, click the button to reveal the hidden element:

$('#button').click()

And finally, scroll to the element:

$('html, body').animate({ scrollTop: $('#hidden_element').offset().top },{ duration: 1000});

scroll to specific element on page using jquery

UPDATE

Try this one, if you want a menu and menu links to specific page. It will scroll to your page with curtain effect.

DEMO http://jsfiddle.net/yeyene/mCytP/2/

Add menu outside of ol, then add links with your li page id in href.

<div id="menu">
    <ul>
        <li><a href="#home" class="curtain-links curtain-links-active">Home</a></li>
        <li><a href="#about_us" class="curtain-links">About Us</a></li>
        <li><a href="#portfolio" class="curtain-links">Portfolio</a></li>
        <li><a href="#programs" class="curtain-links">Programs</a></li>
     </ul>
</div>

How to get specific element from page to variable in Google Tag Manager

Global variables like that are accessible in the window object. This code should do it:

function() {
  return window.wtml_cookies["wp-wtml_current_language"]["value"];
}

---

Related Topics