单击链接后如何更改滚动条的位置 [英] how can I change the scrollbar location once a link is clicked

问题描述

我的index.html页面上有一个按钮，如下所示:

I have a button on my index.html page like this:

关于我们

，一旦用户单击此按钮并移至关于我们"页面，我想将滚动条从页面顶部向下放置200px.我在SO上看到了一些有关如何使用jQuery插件下移页面的问题.但是，我希望能够先导航到新页面，然后为用户自动向下滚动页面.我的第一个想法是要有一些jQuery，它将在页面加载时将关于我们"页面下移.但是，我只希望页面仅在单击索引页面上的链接时才向下移动，而不希望用户通过其他方式导航到页面时才向下移动.这可能吗?

and once the user has clicked this button and been moved to the About Us page, I want to position the scrollbar around 200px down from the top of the page. I saw a few questions on SO about how to move the page down using a jQuery plugin. However, I want to be able to first navigate to the new page, and then automatically scroll the page down for the user. My first thought was to have some jQuery that would just move the About Us page down on page-load. However, I only want the page to move down only when the link on my index page is clicked and not if a user navigates to the page from another way. Is this possible?

推荐答案

如果about us页面上具有ID的元素，则可以将链接更改为(请注意，正斜杠不在ID之前).

If you have an element on the about us page with an ID you can change your link to (note that the forward slash is not before the id).

<a href="about.html#ElementID"/>

，这会将滚动点放到具有该ID的元素上.例如，此链接将带您回到此

and that will put the scroll point to the element with that ID. For example, this link will bring you back to this

此链接-https://stackoverflow.com/questions/28467667/how-can-i-change-the-scrollbar-location-once-a-link-is-clicked#answers

将带您到此页面，但将滚动条设置为答案表格.

Will bring you to this page but set the scroll to the answers form.

如果这不是您要使用的方法，则可以随时尝试使用此Javascript

If this isn't the method you want to use you can always try this Javascript

function ScrollPoint() { 
  var PageHeight=document.body.clientHeight;
  var params = window.location.search.substr(1).split('&');
  for (var i = 0; i < params.length; i++) {
    var a=params[i].split('=');
    if (a[0] == 'scroll') {
        // Add Validation the urlParam (0-9) only! Validation is good!
      var urlParam= decodeURIComponent(a[1]);
      var ScrollPoint=PageHeight-urlParam;
    window.scroll(0, ScrollPoint);
    }
  }

}
window.onload=ScrollPoint;

您可以在url/?scroll = 200中设置一个参数，并使用javascript检查scoll =参数，如果设置了滚动参数，则它将滚动到该点.

You could set a parameter in the url /?scroll=200 and use javascript to check for a scoll= parameter, if the scroll param is set then this will scroll to that point.

希望这对您有所帮助，编码愉快！

I hope this helps, happy coding!

这篇关于单击链接后如何更改滚动条的位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！