Ссылка на элемент на текущей странице

Ответ 1

Вам нужно создать привязку для ссылки. Современный способ сделать это - дать соответствующему элементу атрибут id="Content". Более старый способ сделать это - использовать <a name="Content"></a>.

Ответ 2

Дайте элементу, который вы хотите "перейти" к четкому идентификатору, например:

<p id="idOfTag">Your content goes here</p>

Затем в ссылке в верхней части страницы сделайте ссылку на идентификатор этого элемента (ум #):

<a href="#idOfTag">Jump</a>

Полный пример с несколькими ссылками:

<ul>
  <li><a href="#contentParagraph">Content</a></li>
  <li><a href="#mainPageParagraph">Main page</a></li>
  <li><a href="#documentParagraph">Document</a></li>
  <li><a href="#expensesParagraph">Expenses</a></li>
</ul>
<p id="contentParagraph">
  <h4>Content</h4>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p id="mainPageParagraph">
  <h4>Main page</h4>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p id="documentParagraph">
  <h4>Document</h4>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p id="expensesParagraph">
  <h4>Expenses</h4>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

Ответ 3

Для достижения этого можно использовать атрибут name для тэга anchor.

Скажем, у вас есть div с id content

<div id="content">This is my div</div>

Затем убедитесь, что у вас есть тег anchor с атрибутом name, похожим на id div content

<a href="#" name="content">Click to go to the top</a>

Live Demo.

Прокрутите вниз, чтобы увидеть ссылку

Другим способом сделать это будет

<div id="content">My div</div>

Тогда ваш якорный тег href должен быть #content

<a href="#content">Click to go to top</a>

Live Demo.

Ответ 4

Похоже, на вопрос был дан ответ, но если вы хотите использовать эффект прокрутки при переходе к этим элементам здесь немного JS snipt.       $ (function() {

    function filterPath(string) {
        return string
        .replace(/^\//,'')
        .replace(/(index|default).[a-zA-Z]{3,4}$/,'')
        .replace(/\/$/,'');
    }

    var locationPath = filterPath(location.pathname);
    var scrollElem = scrollableElement('html', 'body');

    // Any links with hash tags in them (can't do ^= because of fully qualified URL potential)
    $('a[href*=#]').each(function() {

        // Ensure it a same-page link
        var thisPath = filterPath(this.pathname) || locationPath;
        if (  locationPath == thisPath
            && (location.hostname == this.hostname || !this.hostname)
            && this.hash.replace(/#/,'') ) {

                // Ensure target exists
                var $target = $(this.hash), target = this.hash;
                if (target) {

                    // Find location of target
                    var targetOffset = $target.offset().top;
                    $(this).click(function(event) {

                        // Prevent jump-down
                        event.preventDefault();

                        // Animate to target
                        $(scrollElem).animate({scrollTop: targetOffset}, 2000, function() {

                            // Set hash in URL after animation successful
                            location.hash = target;

                        });
                    });
                }
        }

    });

    // Use the first element that is "scrollable"  (cross-browser fix?)
    function scrollableElement(els) {
        for (var i = 0, argLength = arguments.length; i <argLength; i++) {
            var el = arguments[i],
            $scrollElement = $(el);
            if ($scrollElement.scrollTop()> 0) {
                return el;
            } else {
                $scrollElement.scrollTop(1);
                var isScrollable = $scrollElement.scrollTop()> 0;
                $scrollElement.scrollTop(0);
                if (isScrollable) {
                    return el;
                }
            }
        }
        return [];
    }

});