Is there way to scroll to anchor rather than jump

2019-07-10 17:04发布

站内问答 / JavaScript
629 6 5

I have a large document with numbered anchor tags as shown below. And a textbox to punch the numbers in to go to anchor which uses window.location.hash

I am also using arrow keys to go next or previous anchors. I want to scroll to the anchor so to give some sense of direction.

<a name="1">
some text
<a name="2">
some text
<a name="3">

here is my function

function updatePageNumber()
{
    var pagenumber;
    pagenumber = document.getElementById('pageNumber').value;   
    window.location.hash =  pagenumber;
}

Jumping to anchor is very ugly and people loose sense of direction in the text. So is there a way to scroll to anchor with JavaScript. I know there are lots of jQuery examples, but I don't know jQuery and couldn't find JavaScript.

Most important reason is I want to see my page number on the address bar!

6条回答
戒情不戒烟
3楼-- · 2019-07-10 17:13

Use this code and enjoy

$(document).ready(function(){
$("#btop").hide();  // replace only #btop with your <div id=" ">

$(function(){
    $(window).scroll(function(){
        if ($(this).scrollTop()>100){
            $('#btop').fadeIn();  // replace only #btop with your <div id=" ">
        }
        else{
            $('#btop').fadeOut(); // replace only #btop with your <div id=" ">
        }
    });

    $('#btop a').click(function(){ // replace only #btop with your <div id=" ">
        $('body,html').animate({
          scrollTop:0
        },200);  // to speed up scroll replace 200 to 300 or 500
        return false;
    });
});
});
查看更多
0人赞 添加讨论(0) 举报
时光不老，我们不散
4楼-- · 2019-07-10 17:13

You may want to check out this tutorial or google for "JS smooth scroll"

查看更多
0人赞 添加讨论(0) 举报
ゆ 、 Hurt°
5楼-- · 2019-07-10 17:28

Add jQuery library.

Use the following script to do a smooth scroll to the target element you want.

jQuery('html,body').animate({scrollTop: jQuery('#target').offset().top}, 1000);

target is the id of the target element and 1000 is the duration of the animation.

查看更多
0人赞 添加讨论(0) 举报
SAY GOODBYE
6楼-- · 2019-07-10 17:29

There is no built-in smooth scrolling in JavaScript so you would have to implement it yourself -- but why re-invent the wheel if you already have it in jQuery and you probably won't have to add more than two or three lines of code? Just download jQuery and the ScrollTo plugin, add them to your <head> section in a <script> tag and then use this to scroll to an element with a given ID:

$.scrollTo("#my-element-id");

This will scroll to the element whose ID is my-element-id so you have to use the id=... attribute in the anchors and not the name=... attribute.

If you wish to add this behaviour automatically to all your anchors within a given div (or to the entire page), you can use the LocalScroll plugin which makes the entire this as simple as:

$.localScroll();
查看更多
0人赞 添加讨论(0) 举报
Juvenile、少年°
7楼-- · 2019-07-10 17:30

I know you said that you don't know jQuery, but you are going to want to use it for the scrolling anyways. Here's a simple example of how it could be used.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)