javascript - jQuery滚动到元素(jQuery scroll to element)

Question

Ask a Question

Welcome To Ask or Share your Answers For Others

javascript - jQuery滚动到元素(jQuery scroll to element)

asked Feb 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

I have this input element:

(我有这个input元素：)

<input type="text" class="textfield" value="" id="subject" name="subject">

Then I have some other elements, like other text inputs, textareas, etc.

(然后，我还有其他一些元素，例如其他文本输入，文本区域等。)

When the user clicks on that input with #subject , the page should scroll to the last element of the page with a nice animation.

(当用户使用#subject单击该input时，页面应滚动到页面上具有精美动画的最后一个元素。)

It should be a scroll to bottom and not to top.

(它应该是滚动到底部而不是顶部。)

The last item of the page is a submit button with #submit :

(页面的最后一项是带有#submit的submit按钮：)

<input type="submit" class="submit" id="submit" name="submit" value="Ok, Done.">

The animation should not be too fast and should be fluid.

(动画不应太快且应流畅。)

I am running the latest jQuery version.

(我正在运行最新的jQuery版本。)

I prefer to not install any plugin but to use the default jQuery features to achieve this.

(我更喜欢不安装任何插件，而是使用默认的jQuery功能来实现此目的。)

ask by DiegoP. translate from so

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

242 views

1 Answer

深蓝 · Answer 1 · 2021-02-24T04:53:33+0000

Assuming you have a button with the id button , try this example:

(假设您有一个带有id button ，请尝试以下示例：)

$("#button").click(function() {
    $([document.documentElement, document.body]).animate({
        scrollTop: $("#elementtoScrollToID").offset().top
    }, 2000);
});

I got the code from the article Smoothly scroll to an element without a jQuery plugin .

(我从文章平稳地滚动到没有jQuery插件的元素中获得了代码。)

And I have tested it on the example below.

(我已经在下面的示例中对其进行了测试。)

 <html> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <script> $(document).ready(function (){ $("#click").click(function (){ $('html, body').animate({ scrollTop: $("#div1").offset().top }, 2000); }); }); </script> <div id="div1" style="height: 1000px; width 100px"> Test </div> <br/> <div id="div2" style="height: 1000px; width 100px"> Test 2 </div> <button id="click">Click me</button> </html>

Categories

javascript - jQuery滚动到元素(jQuery scroll to element)

Please log in or register to add a comment.

Please log in or register to answer this question.

1 Answer

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags