Question

在我的一个页面上有一个按钮＆＃34; Get Started＆＃34;和按钮的URL是URL：localadvertisingthatworks.com/test#my_site。我想当我点击该按钮时，它会重定向到我的主页的特定部分。是否有任何jquery代码可以在特定网址上滚动页面。

＆＃13;

<a href="http://localadvertisingthatworks.com/test#my_site">Link</a>

<a name="my_site>Anchor</a>

＆＃13;

我已经尝试过这段代码，但它在Firefox和ie中没有用。所以请给我一些适用于所有浏览器的jquery代码。

Answer 1

您需要在id上设置section，以便它自动生成，在页面加载时滚动。

<a href="http://localadvertisingthatworks.com/test/#my_site">Link</a>

<a name="my_site>Anchor</a>

Answer 2

好的，所以说在你的头版，你有一个部分。该部分需要具有某种ID，例如npm scripts（html将类似于：#my_section_id）。然后你的按钮必须指向它：

<section id="my_section_id">...</section>

现在，<a href="#my_section_id" class="scroll">My scrollable section</a>类可以与常规链接区分开来。因为如果您与该部分位于同一页面上，并且您还想滚动到该部分，则不希望页面重新加载。执行此操作的平滑滚动jquery脚本如下所示：

.scroll

您需要自行调整偏移量

$(".scroll").on('click', function(e){
    e.preventDefault();
    var href = ( $(this).attr('href') !== undefined ) ? $(this).attr('href') : $(this).find('a').attr('href');
    var hash = href.split('#');
    var url_hash = '#' + hash[1];
    if ($(url_hash).length > 0) {
        var offset = ( $(window).width()<769) ? 20 : 100;
        $('html, body').animate({
            scrollTop: $(url_hash).offset().top-offset
        }, 1000);
    }
    else{
        location.href = href;
    }
});

if(window.location.hash){
    var hash = window.location.hash;
    var $scrollto = $(hash);
    if($scrollto.length){
        var offset = ( $(window).width()<769) ? 20 : 100;
        $('html, body').animate({
            scrollTop: $scrollto.offset().top-offset
        }, 1000);
    }
}

取决于您想要滚动到您的部分的距离。

如果您在同一页面上，则第一部分会注意您滚动到该部分，我们有var offset = ( $(window).width()<769) ? 20 : 100;来阻止默认链接行为。第二部分显示您是否在不同的页面上，并将加载滚动页面的页面，并在您打开它时滚动到它。

您需要添加的唯一内容是链接的e.preventDefault();类。如果你想在菜单中添加它，这可能有点棘手，但它可以用菜单步行器修改。

希望这有帮助。

Answer 3

if(window.location.hash){
    var e = window.location.hash;
   setTimeout(() => {
    if($(e).position() != undefined){
      var top_position = $(e).position().top-120 ;
      $('body, html').animate({ scrollTop: top_position }, "slow");
      $(e).css("background-color", "#E3E3E3").animate({ backgroundColor: '#FFFFFF' }, 2200);
    }
   }, 2000);
  }

// 对于动画功能，您需要 jquery ui cdn // jQuery UI - v1.10.4 - 2014-01-17

我想在特定的URL上滚动页面

3 个答案: