如何在页面上设置#链接，但将目标与屏幕底部对齐

How to set up a #link to later on a page, but aligning the target with the bottom of the screen

本文关键字：目标 屏幕 对齐 底部 链接 设置      更新时间：2023-09-26

我想点击我新网站上的about部分，当它向下滚动时，我想将"about"部分的底部与屏幕底部对齐，而不是向上滑动about部分并将"about"部分的顶部与屏幕顶部对齐。

我不确定这是必须用javascript完成，还是可以用HTML完成。你有什么想法？

这是用于滚动到顶部的功能。（这是一个JSFiddle）

//jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
    $('.page-scroll a').bind('click', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top
        }, 1500, 'easeInOutExpo');
        event.preventDefault();
    });
});

我只是把它改成：吗

//jQuery for page scrolling (to bottom) feature - requires jQuery Easing plugin
$(function() {
    $('.page-scroll a').bind('click', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollBottom: $($anchor.attr('href')).offset().top
        }, 1500, 'easeInOutExpo');
        event.preventDefault();
    });
});

没有scrollBottom，因此需要计算适当的scrollTop:

$(function() {
    $('.page-scroll a').bind('click', function(event) {
        var $anchor = $(this);
        var $section = $($anchor.attr('href'));
        var scrollPos = $section.offset().top + $section.outerHeight() - $(window).height();
        $('html, body').stop().animate({
            scrollTop: scrollPos
        }, 1500, 'easeInOutExpo');
        event.preventDefault();
    });
});

http://jsfiddle.net/YjgdS/6/

相关文章：