Question

我希望在页面顶部有一个链接，如： -

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

基本上我想做以下事情： -

单击#example时，我希望它滚动到页面上h1 value ='test'的位置： -

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

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

});

这可能吗？

我知道我可以使用锚点，但是我使用的是一个不添加此菜单的菜单插件，所以我需要查看值是什么，因为这是不同部分之间唯一的唯一。< / p>

Answer 1

您甚至不需要Javascript来执行此操作。在你的h1标签之前，你可以放一个锚：

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

然后您的链接将是这样的：

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

或者你可以按照这个SO答案：https://stackoverflow.com/a/6677069/324978

Answer 2

当然，你可以避免使用javascript来完成这么简单的任务，但是如果你真的需要，你可以让它更具动感，滚动更顺畅。

您的数据目标可以引用目标的ID（更好）或目标文本，如果这是您真正想要的......

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

如果它是您要定位的ID，则目标html就像那样

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

但它也可能是您要定位的文字

<h1>test</test>

如何使用jQuery进行定位：

目标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);
});

目标文字

$('.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区分大小写，请记住这一点。

Answer 3

使用.filter()方法查找目标元素，然后使用其.offset()（在文档中找到它的位置）和.animate() {{1}页面的属性

scrollTop

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

演示

Answer 4

无法帮助您滚动，但要找到值：

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.
        }
    }
}

我认为这是正确的:)然而它确实假设您的h1有一个值标记，例如：

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

Answer 5

如果我理解正确你有一些你无法改变的HTML（因为它是生成的），但你希望能够通过超链接跳转到某些部分，即使HTML没有锚点。

您可以尝试查看生成的代码是否包含带ID的标记，您可以像锚一样使用它们。

如果生成的部分也没有ID，您可以遍历所有<h1>并为其分配ID，或者只是在页面加载后添加锚点，如果这不会破坏生成的代码。像这样：

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

JSFiddle

我希望我能正确理解你的情况。

滚动到页面上的位置，其中值=＆＃39; x＆＃39;

5 个答案: