Question

我有这个代码可以顺利滚动到div id，但不能滚动到名称：

$('.scroll').on('click', function(e) {
    e.preventDefault();
    $('html, body').animate({
        scrollTop: $($(this).attr('href')).offset().top - 70
    }, 800, function(){
        window.location.hash = "#";
        return false;
    });
});

而这一个恰恰相反：

$('.scroll').on('click', function(e) {
    e.preventDefault();
    $('html, body').animate({
        scrollTop: $('[name="' + $.attr(this, 'href').substr(1) + '"]').offset().top - 70
    }, 800, function(){
        window.location.hash = "#";
        return false;
    });
});

如何将两个代码混合在一个代码中滚动到ID和名称？

Answer 1

加入选择器。这样jQuery将使用它找到的第一个：

        scrollTop: $($.attr(this, 'href') + ',[name="' + $.attr(this, 'href').substr(1) + '"]').offset().top - 70

Answer 2

万一有人需要它：

$(function() {
    $('.scroll').on('click', function(e) {
        e.preventDefault();
        $('html, body').animate({
            scrollTop: $($.attr(this, 'href') + ',[name="' + $.attr(this, 'href').substr(1) + '"]').offset().top - 70
        }, 800, function(){
            window.location.hash = ="#";
            return false;
        });
    });
});

Answer 3

有没有办法用vanilla javascript做到这一点？

我在vanilla javascript中找到的最佳解决方案是导入包https://github.com/cferdinandi/smooth-scroll

Answer 4

我不确定我是否100％理解您的问题，但我认为您可以使用querySelector按名称搜索元素，然后将滚动应用于您的元素。

我之前正在寻找一个简单的滚动解决方案，遇到scrollIntoView。工作就像一个魅力，需要的代码比我找到的任何其他解决方案少得多。

＆＃13;

var foo = document.querySelector('[name="foo"]');
var bar = document.querySelector('#bar');

foo.addEventListener('click', 
  function(){
  bar.scrollIntoView({behavior: 'smooth', block: 'start'});
 });

＆＃13;

.top {
  width: 100%;
  height: 150vh;
  background-color: blue;
  text-align: center
}

button {
  margin-top: 2rem;
  padding: 5px 15px;
  font-size 18px;
 }

.second {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100vh;
  background-color: green;
}

h1 {
  color: white;
 }

＆＃13;

<div class="top">
  <button name="foo">Click Here</button>
</div>
<div class="second" id="bar">
  <h1>It's Working!</h1>
</div>

＆＃13;

平滑滚动到名称和ID

4 个答案: