Scroll to location on page where value = 'x'

Question

I want to have a link at the top of my page like:-

<a href="#" id="example">Scroll to</a>

Basically I want to do the following:-

When #example is clicked, I want it to scroll to a location on the page where h1 value = 'test':-

$('#example').bind('click',function() {

    // GO TO LOCATION ON PAGE WHERE h1 value ='test' ( <h1> = 'test' </h1> )

});

Is this possible to do?

I know I can use anchors for this but I'm using a Menu plugin which doesn't add this so I need to go by what the value is as this is the only thing that is unique between the different sections.

Answer 1

You don't even need Javascript to do this. Right before your h1 tag, you can put an anchor:

<a name="scroll-to-location"></a>
<h1>test</h1>

Then your link would be something like this:

<a href="#scroll-to-location">Scroll to</a>

Or you could follow this SO answer: https://stackoverflow.com/a/6677069/324978

Answer 2

It's ofcourse true you could avoid javascript for such a simple task but if you really need to, you can make it more dynamic and with a smoother scroll.

Your data-target can refer to target's id (better) or to target's text if that's what you really want...

<a class="inpagelink" href="#" id="example" data-target="test">Scroll to</a>

if it is an id you are targeting, the target html would be like that

<h1 id="test">some title</h1>

but it could as well be the text you are targeting

<h1>test</test>

How to target, using jQuery:

1. Target ID

   $('.inpagelink').on('click', function(e){
     e.preventDefault();
     //get the targets position
     var $whereto = $('#'+ $(this).attr('data-target'));
     var gotopx = parseInt($whereto.offset().top);
     //and scroll there, in 1 sec
     $('html, body').animate({ scrollTop: gotopx }, 1000);
   });
   

2. Target text

   $('.inpagelink').on('click', function(e){
     e.preventDefault();
     //get the targets position
     var $whereto = $('h1:contains(' + $(this).attr('data-target') + ')');
     var gotopx = parseInt($whereto.offset().top);
     //and scroll there, in 1 sec
     $('html, body').animate({ scrollTop: gotopx }, 1000);
   });
   

:contains is case sensitive so have that in mind.

Answer 3

Find the target element using the .filter() method and then use its .offset()(to find its position in the document) and .animate() the scrollTop property of the page

$('#example').bind('click',function(e) {
    e.preventDefault();

    var target = $('h1').filter(function(){ return $(this).text() == 'test' ;});

    $('html,body').animate( {
        scrollTop: target.offset().top
    });

});

Demo at http://jsfiddle.net/Lc8gg7pm/1/

Answer 4

Can't help you with scrolling, but to find the value:

var jsondata = {value: "whatever value you want"};
$('#example').bind('click', jsondata, function(e) {
    $('h1').each(function() {
        if ($(this).val() == jsondata.value) {
            $('body').scrollTo($(this)); //never used this before, but can't see why it wouldn't work.
        }
    }
}

I think this is right :) it does however assume that your h1's have a value tag, like:

<h1 value='test'>test</h1>

Answer 5

If I understand you correctly you have some HTML that you can't change (as it's generated), but you want to be able to jump to certain parts via a hyperlink even though the HTML doesn't have anchors.

You could try and see if the generated code has tags with IDs, you can use those just like anchors.

If the generated part has no IDs either, you could iterate through all the <h1>s and assign IDs to them or simply add anchors after the page has been loaded if that doesn't break the generated code. Like so:

var headings = document.getElementsByTagName('H1');
for (var x=0;x<headings.length;x++) {
  headings[x].id=headings[x].innerHTML;
}

JSFiddle

I hope I understood your situation correctly.