我在使用此功能时遇到问题，希望获得一些帮助。

我的层次结构是TabBarController-> Navigation Controller->TableViewController

我想要的是，如果您在当前选项卡上并且向下滚动，您将能够点击当前视图，UITabBarItem并且您将滚动回顶部，就像 Instagram 和 Twitter 那样。

我在这里尝试了很多事情：

较旧的问题

但遗憾的是，没有一个答案适合我。

我真的很感激任何有关这种方式的帮助，提前谢谢您！

这是我的 TableView`控制器的代码：

import UIKit

class BarsViewController: UITableViewController,UISearchResultsUpdating,UISearchBarDelegate,UISearchDisplayDelegate,UITabBarControllerDelegate{

//TableView Data & non related stuff....

override func scrollViewWillBeginDragging(_ scrollView: UIScrollView) {
        self.searchController.searchBar.resignFirstResponder()
        self.searchController.searchBar.endEditing(true)
    }

 func tabBarController(_ tabBarController: UITabBarController, didSelect viewController: UIViewController) {
        let tabBarIndex = tabBarController.selectedIndex
        if tabBarIndex == 0 {

            let indexPath = IndexPath(row: 0, section: 0)
            let navigVC = viewController as? UINavigationController
            let finalVC = navigVC?.viewControllers[0] as? BarsViewController
            finalVC?.tableView.scrollToRow(at: indexPath as …

nav、main、footer，有3个标签。我将它们应用到 FlexBox ：

body {
  color: #ddd;
  font-family: Gotham;
  background: url(../assets/body-background.png);
  display: flex;
  min-height: 100%;
  flex-direction: column;
}
main {
  flex: 1;
}

一切看起来都那么好。但在那之后事情变得更糟

我的脚本文件中有以下代码（使用 jQuery）：

$('.scroll-top').click(function () {
  $('body').animate({
     scrollTop: 0
  }, 1000);
})

但页面滚动动画不起作用

jsfiddle

body {
  color: #ddd;
  font-family: Gotham;
  background: url(../assets/body-background.png);
  display: flex;
  min-height: 100%;
  flex-direction: column;
}
main {
  flex: 1;
}

$('.scroll-top').click(function () {
  $('body').animate({
     scrollTop: 0
  }, 1000);
})

$('a').click(function(){
	$('body').animate({
      scrollTop: 0
    }, 1000);
})

我的网站上有一个功能，徽标根据用户在网站上的位置垂直滚动。

你可以在这里看到它在 Chrome 上的运行情况

但它不适用于 Safari（包括手机和平板电脑）。

控制台中的滚动位置似乎根本没有改变。

// logo positioning  

let logos, logoHeight, barTopMargin;
let viewportHeight;

window.addEventListener('load', init);
window.addEventListener('resize', setSizes);
document.addEventListener('scroll', update);


function init(lockUpdate) {
    logos = document.querySelectorAll('.scroll-text');
    setSizes(lockUpdate);
}

function update() {
    // ensure initialization and prevent recursive call
    if (!logos) init(true);
    //*************************************************

    /**************************************************
        THIS LINE MUST BE HERE.
    **************************************************/
    let maxScrollDist  = document.documentElement.scrollHeight - viewportHeight;
    //*************************************************

    let currentScrollPos = document.documentElement.scrollTop;
    let newTop;

    let middle = currentScrollPos + viewportHeight/2;
    let middleY = maxScrollDist/2;

    if (middle >= (maxScrollDist+viewportHeight)/2) { …

我正在处理以下代码。我试图发现为什么我无法.post使用 jQuery滚动div 并使用如下所示的百分比值正确输入范围：

$("[type=range]").on('input',function(){
    var val = parseInt($(this).val());
   $('.post').animate({ scrollTop: val+"%" }, 5);
  });

.post {

    overflow-x:hidden;
    top:30px;
    height:200px;
    width:200px;
    background-color:#EEE;
}

.content {
    width:100%;
    height:3000px;
}

input {
  width: 150px;
  height: 20px;
  margin: 0;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container py-2">
   <input type="range" orient="vertical"  min="0" max="100" value="0" />
</div>
<div class="container py-2">

<div class="post">
    <div class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since …

我在页面上有一些链接,目的是"走到顶端",通过将页面滚动到顶部并获得一个漂亮的动画来完成.我注意到,有时在页面滚动时,用户会想要向下滚动,例如,但这是不可能的.屏幕只会断断续续,但会继续制作动画,直到它到达顶部.

我想在用户尝试滚动时停止动画,因此我编写了这段代码:

$('#gototop').click(function() {
    $('body').animate({scrollTop:0},3000);
    $(window).scroll(function () {
        $('body').stop();
});
    return false;
})

这段代码存在问题,因为animate()计为滚动,因此它只会在停止之前移动一点点.

我也尝试过按键作为选项,但鼠标滚动不会注册为键.

当用户滚动时,有没有办法调用我的滚动功能,而不是动画()？

任何人都可以推荐一种"最佳"方法,在向下滚动页面时将滚动条捕捉到元素的顶部？

例如,如果我的布局如下:

<div id="section-one" style="width: 100%; height: 600px;">
    Section One
</div>

<div id="section-two" style="width: 100%; height: 600px;">
    Section Two
</div>

<div id="section-three" style="width: 100%; height: 600px;">
    Section Three
</div>

<div id="section-four" style="width: 100%; height: 600px;">
    Section Four
</div>

如果用户正在查看第一部分并开始浏览第二部分开始参与浏览器视口,我希望浏览器自动捕捉到下一个div的顶部.

我熟悉.scroll()和.scrollTop,但有点不确定从哪里开始.

我在jQuery中有一个scrollTop函数,但我无法为其设置动画.可能吗？

$(".loadmore").click(function() {
  $(this).toggleClass("up-arrow", 1000);
  $(window).scrollTop($('.docs').offset().top, 2000);
});

左边是我正在尝试滚动的东西......它只是滚动一点然后停止.它似乎每次滚动相同的数量.

当我尝试滚动到的内容位于div中时,我正在尝试使用jQuery来处理页面加载时使用jQuery.当前的实现没有做任何事情

JavaScript的

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

<script>
    $(document).ready(function (){
            //$(this).animate(function(){
                $('html, body').animate({
                    scrollTop: $("#test4").offset().top
                     }, 2000);
            //});
    });
</script>

HTML

<div class="row">
    <div class = "span12">

        <div class = "row">

            <div class = "span2">

                <div style="height:480px;font:12px Georgia, Garamond, Serif;overflow:auto;">

                    <div id = "test1">Test1</div>
                    <div id = "test2">Test2</div>
                    <div id = "test3">Test3</div>
                    <div id = "test4">Test4</div>

                </div>
            </div>


            <div class = "row">
                <div class = "span8">
                    Other content on the page
                </div>
            </div>

        </div>
    </div>
</div>

我scrollTop在每个字母的单击函数的联系人号码列表中使用了JQuery函数.它滚动到它应该的位置,但然后立即滚动回到顶部.

以下是代码中函数的示例:

$('.a').click(function(){
     $('html, body').animate({scrollTop:$('#A').position().top}, 'slow');
});

这是我为它制作的JSFiddle:http: //jsfiddle.net/CR47/MdtSE/

本质上,我正在尝试做的是将CSS类应用于上下文中的元素到文档的滚动位置.

具体来说,允许我的侧边栏导航滚动到视图端口顶部下方20px以及其余内容,此时元素变为固定位置,这要归功于添加了css类,直到文档随后向后滚动在该点之上,当删除该类并且该元素再次与页面内容的其余部分一起滚动时.

我需要解决方案尽可能轻,并且不希望使用除jQuery之外的任何库,这已经存在.它应该与响应式布局和跨浏览器兼容 - 包括IOS和Andriod平板电脑.

这是我到目前为止的JS,作为$(document).ready()函数执行:

// fixed element target
var $fixedElement = $("#fixIt");

// if the element exists
if ($($fixedElement).length > 0) {

    var $fixedElementTop = $fixedElement.offset().top -20;

        $(window).scroll(function(){
            // add .fixed else remove class
            if ($(this).scrollTop() > $fixedElementTop) {
                $('#fixIt').addClass('fixed');
            }else{
                $('#fixIt').removeClass('fixed');
            }

        });

} 

这在所有浏览器中都能完美运行(无论如何最新版本)除了Safari - 那是Safari ..没错.它也适用于IE!截至本文撰写时,我还未对平板电脑进行过测试.

问题是Safari返回了不同的值$fixedElementTop.它大约450px.

由此我确定在我想要应用该类的元素上方的响应元素上缺少高度属性,这很可能是发生这种情况的原因 - 但仅限于Safari.

我认为jQuery提供了解决这些问题的方法,但不能为我的生活解决问题.我已经在这个网站上阅读了10篇或更多的文章,还有更多来自其他网站的文章,似乎没有解决这个问题.

注意:该函数必须以动态方式工作 - 我不能简单地考虑我想要添加类的元素上方的所有元素并在此基础上进行计算,例如,因为这些细节将会改变从页面到页面.

这就是为什么我没有包含任何HTML或CSS的问题 - 我认为正确的解决方案应该使用任何兼容的标记.

有任何想法吗？提前致谢.

编辑

根据请求的HTML/CSS(抱歉);

HTML

<div id="billboard-wrap">

    <div class="container">

        <div class="sixteen columns">

            <div …